Go Back   Dreamweaver Club Forums > Dreamweaver forums > Dreamweaver General
Register FAQ Members List Search Today's Posts Mark Forums Read

Thread Tools Display Modes
Old 08-05-2009, 08:19 PM   #1
Join Date: Aug 2009
Posts: 9
Default image tooltip

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.
toto1004 is offline   Reply With Quote
Old 08-05-2009, 08:53 PM   #2
DWcourse's Avatar
Join Date: Apr 2009
Posts: 3,276

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.
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 08-05-2009, 08:55 PM   #3
domedia's Avatar
Join Date: Dec 2003
Posts: 9,730

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
domedia is offline   Reply With Quote
Old 08-06-2009, 01:28 AM   #4
edbr's Avatar
Join Date: Aug 2005
Location: Bali
Posts: 11,201

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>.
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

All times are GMT. The time now is 09:31 PM.

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com