logo-dw

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

Reply
 
Thread Tools Display Modes
Old 08-05-2009, 09:19 PM   #1
toto1004
 
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, 09:53 PM   #2
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

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, 09:55 PM   #3
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

If you want the regular browser tooltip, just add the attribute 'title' with a value to the AREA tag.

Example:
<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, 02:28 AM   #4
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,187
Default

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
Code:
 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
Code:
<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
Reply


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 05:57 AM.


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