PDA

View Full Version : Image map mouse over help



PETER_g
02-09-2008, 07:45 PM
1) Script Title: Image w/ description tooltip

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm

3) Describe problem: I am trying the make a section on my portfolio site where the mouse hovers over the image and you can see it in full size, I have set up the rest of the script to work and it has done when I was using it a different way. The problem I am having is integrating the script into the image map, here is the image map source,

<img src="gallery.png" width="686" height="515" border="0" usemap="#map" />

<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:peter -->
<area shape="poly" coords="67,72,75,171,134,168,127,67" onmouseover="doTooltip(event,4)" onmouseout="hideTip()" nohref="nohref" />
<area shape="poly" coords="213,166,205,286,295,292,303,172,254,168" onmouseover="doTooltip(event,5)" onmouseout="hideTip()" nohref="nohref" />
<area shape="poly" coords="324,74,422,65,430,144,330,155" onmouseover="doTooltip(event,0)" onmouseout="hideTip()" nohref="nohref" />
<area shape="poly" coords="469,425,463,482,620,498,627,441" onmouseover="doTooltip(event,1)" onmouseout="hideTip()" nohref="nohref" />
<area shape="poly" coords="528,120,519,216,618,226,627,131" onmouseover="doTooltip(event,3)" onmouseout="hideTip()" nohref="nohref" />
<area shape="poly" coords="98,342,196,353,185,451,87,439" onmouseover="doTooltip(event,7)" onmouseout="hidetip()" nohref="nohref" />
<area shape="poly" coords="392,339,577,320,580,329,394,350,392,345" onmouseover="doTooltip(event,6)" onmouseout="hideTip()" nohref="nohref" />
</map>

I have tried editing it but can not find a way for it to work, could someone please help me, or better yet do it for me? ;)
(I have the messages[0] to messages[7])

jscheuer1
02-10-2008, 05:35 AM
Have a look here:

http://home.comcast.net/~jscheuer1/side/imapper/

But if your poly shapes are nestled in among each other such that rectangles drawn around each of them would overlap significantly in many places, it will not work out for that particular map.

However, even with no special modifications or additional scripts, that particular tool tip script should work with an image map as long as:

var tipFollowMouse= true;

is set in its configuration. If you need more help:

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

wini
12-23-2009, 06:16 PM
Hi,

I know this was an old thread, but I recently ran into the same problem. I change var tipFollowMouse= true; and it works fine in IE6 and IE7 (along with Firefox, Opera, and Chrome) but it doesn't work in IE8.

I have a map image and also integrating the same script into an image map:

<map><area shape="poly" onmouseover="doTooltip(event,0)"
onmouseout="hideTip()" ......>

The map areas don't overlap one another. The script is the same that Peter_g used (Image with description tooltip on DD (http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm))

Has anyone been able to get this to work in IE8 when integrating it in an image map?

Thanks!

wini
12-23-2009, 06:24 PM
Hi again,

Please disregard my previous post. I added the "imapper.js" script that jscheuer1 provided on his site (http://home.comcast.net/~jscheuer1/side/imapper/), and it is working in IE8.

Thanks!!