PDA

View Full Version : 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! :)

<a href="#" onmouseover="doTooltip(event,0)" onmouseout="hideTip()">Link 1</a><br>
<a href="#" onmouseover="doTooltip(event,1)" onmouseout="hideTip()">Link 2</a>

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.


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



<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 (http://www.dynamicdrive.com/forums/showthread.php?t=6) 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" />
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></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>&nbsp;</h1>
<!-- end #header --></div>
<div id="sidebar1">
<h3>&nbsp;</h3>
<!-- end #sidebar1 --></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>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<p>&nbsp;</p>
<!-- end #footer --></div>
<!-- end #container --></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