Image w/ description tooltip/mouseover effects

**heatherjacobus** · 02-17-2009, 06:53 PM

I am having trouble with the image w/description tooltip/mouseover effects. Basically I am trying to have a map where we have locations. Once a locations has the mouse over it, I would like to have a small box showing the address, etc. I looked at the code from image w/description and don't know how it is to determine where the locations of the gif's are suppose to be on the main gif. The locations are in all different areas of the map, how am I suppose to code something like that? Thank you!

**bluewalrus** · 02-18-2009, 12:59 AM

you could use a span if its text visibility hidden on regular state and on hover position it with top and left and absolute and visibility visible. This won't follow the mouse around but you could have it go over the block they are on.

Code:

a span { visibility:hidden;}
a:hover span {visibility:visible; 
position:absolute;
top:112px;
left:250px;
}

Code:

<a href="#">Link 1<span>YOU ARE HERE?</span></a><br>

**heatherjacobus** · 02-18-2009, 01:13 PM

OK, now I am really confused. I am using Dreamweaver CS3 and am not that great with HTML. Is there an easier way to do this so that I understand?
Thank you!

**bluewalrus** · 02-18-2009, 11:24 PM

post all your code and a link and i can try and explain it

**jscheuer1** · 02-19-2009, 07:22 AM

In future, please post about Dynamic Drive Scripts in the Dynamic Drive Scripts Help section here where I've moved this thread, and:

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

Please post a link to the page on your site that contains the problematic code so we can check it out.

**heatherjacobus** · 02-19-2009, 06:52 PM

OK, here is all the code. This is a test page. I have five different regions to do so I just started. I am able to get it to say testing one under Minn./St. Paul (I learned that from the website), but I can't get a graphic in there. Basically I need it to design it similar to this map, but I want to use just one graphic that I will create in Photoshop (gif). I got the idea from the website below and saw they used this website. Please Help! Thank you much! Heather

http://ushertransport.com/location.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="truckmaintwocolumnfixed.css" rel="stylesheet" type="text/css" />
</head>

<body class="twoColFixLtHdr">

<script>

/*
Text Link/Image Map Tooltip Script-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, and 100's more DHTML scripts
Visit http://www.dynamicdrive.com
*/

if (!document.layers&&!document.all&&!document.getElementById)
event="test"
function showtip(current,e,text){

if (document.all||document.getElementById){
thetitle=text.split('<br>')
if (thetitle.length>1){
thetitles=''
for (i=0;i<thetitle.length;i++)
thetitles+=thetitle[i]
current.title=thetitles
}
else
current.title=text
}

else if (document.layers){
document.tooltip.document.write('<layer bgColor="white" style="border:1px solid black;font-size:12px;">'+text+'</layer>')
document.tooltip.document.close()
document.tooltip.left=e.pageX+5
document.tooltip.top=e.pageY+5
document.tooltip.visibility="show"
}
}
function hidetip(){
if (document.layers)
document.tooltip.visibility="hidden"
}

</script>
<div id="tooltip" style="position:absolute;visibility:hidden"></div>

<div id="container">
<div id="header">
<h1> </h1>
</div>
<div id="sidebar1">
<h3> </h3>
</div>
<div id="mainContent">
<h1><img src="wimap.gif" alt="" width="435" height="405" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="circle" coords="249,120,7" href="#" onMouseover="showtip(this,event,'testing one')"onMouseout="hidetip()" /> </map></h1>
</div>
<br class="clearfloat" />
<div id="footer">
<p> </p>
</div>
</div>
</body>
</html>

**heatherjacobus** · 02-19-2009, 07:00 PM

Sorry, I am new to this. The site is not live yet because I just started it. What should I do now?

**heatherjacobus** · 02-19-2009, 07:47 PM

Bluewalrus-
Please see the code above. I was unaware of the rules of the forum. The site is not live since I just started to first page. Can you help me, please.
Thank you!
Heather

Thread: Image w/ description tooltip/mouseover effects

Thread Tools

Search Thread

Image w/ description tooltip/mouseover effects

Bookmarks

Bookmarks

Posting Permissions