Apologies in advance if I have posted in the wrong forum.
I have just paid for a dreamweaver extension called ‘tooltip magic’ and provides additional information or context that pops up in a attractive box when users mouse over or click on text or images.
I am using tooltip magic to display a tooltip when hovering over an image map hotspot. Please see my working example.
I have also included a link in my head to the appropriate stylesheet to make my tooltip look pretty:
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/p7ttm/p7TTM01.css" />
What I am concerned with is the extra code in my head that will continue to grow as I create more image map hotspots.
Below is the code that defines the tooltip for both image map hotspots in my working example:
HTML code for my image map:
<img src="http://temp-cnet-training.com/wp-content/uploads/2012/07/cdcdp.gif" width="302" height="552" border="0" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="22,275,279,365" href="#" alt="pro" /> <area shape="rect" coords="60,455,239,527" href="#" alt="core" /> </map> <div id="procourse">This is the content of the tooltip.</div> <div id="corecourse">This is the content of the tooltip. This is the content of the tooltip.</div>
Please can someone suggest to me how I can organise all this code!
Please please help!!!