View Full Version : image tooltip

08-05-2009, 08:19 PM
I am brand new to dreamweaver and was wondering how do you create an image tooltip when you mouseover a hotspot?

I created an image map of the US map with each state as a hotspots. When I move the mouse over a hotspot I would like an image to appear, or an image with description, whichever is easiest.

I'm currently using CS3 and really wish I had the CS4 spry tooltip widgit but I don't. I've done extensive searching on the internet and have found lots of different codes but I don't really know code, so am not sure where to paste it in my code or even how to use it.

Are there any basic dreamweaver functions that could create an image tooltip without too much coding? It would be great if someone could please walk me through dreamweaver step by step on how to do this.

08-05-2009, 08:53 PM
My understanding is that CS4's tooltips can't be activated by image hot spots, just the entire image. I don't know of any easy way to do this in Dreamweaver.

08-05-2009, 08:55 PM
If you want the regular browser tooltip, just add the attribute 'title' with a value to the AREA tag.

<area title="Michigan">

EDIT just realized you asked or a tooltip with an image in it.
Many ways to achieve this.
I've used jQuery with a plugin called clueTip

08-06-2009, 01:28 AM
it can also be done with css. you would have to place absolute divs where you want the tool tip then with a place a link in side of it.
then with use this as a style/css
a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/

a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}

a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}
and in the absolute div
<a class="tooltip" href="#"><span><img src="your image.gif>"</span></a>.