Results 1 to 4 of 4

Thread: Image map mouse over help

  1. #1
    Join Date
    Feb 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image map mouse over help

    1) Script Title: Image w/ description tooltip

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...agetooltip.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,
    Code:
    <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])

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 02-10-2008 at 05:42 AM. Reason: add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Issue in IE8

    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)

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

    Thanks!

  4. #4
    Join Date
    Dec 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi again,

    Please disregard my previous post. I added the "imapper.js" script that jscheuer1 provided on his site, and it is working in IE8.

    Thanks!!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •