Mouseover for image map

Hello.

I use an imagemap for navigation:

          <img src="nav_map.gif" width="196" height="379" usemap="#navmap">
          <map name="navmap">
            <area shape="rect" coords="1,39,190,55" href="1.html">
            <area shape="rect" coords="1,60,190,80" href="2.html">
            <area shape="rect" coords="1,86,190,105" href="3.html">
            <area shape="rect" coords="1,109,190,131" href="4.html">
            <area shape="rect" coords="1,135,190,152" href="5.html">
            <area shape="rect" coords="1,160,190,180" href="6.html">
          </map>

I want the image "pointer.gif" to be displayed over "nav_map.gif" as a mouseover at the top right corner of the area the mouse is over.

For example,  if the mouse pointer is over "1.html" I want "pointer.gif" to be displayed at 190,55.  
If the mouse pointer is over "5.html" I want "pointer.gif" to be displayed at 190,152.  

How can I do this?

Thanks!


LVL 16
hankknightAsked:
Who is Participating?
 
sankarbhaCommented:
Try this,

<script language='Javascript'>
<!--
     function showPointer(x,y)
     {
              document.getElementById("divPoniter").style.top=y;
              document.getElementById("divPoniter").style.left=x;
              document.getElementById("divPoniter").style.visibility='visibile';
     }
     function hidePointer()
     {
              document.getElementById("divPoniter").style.visibility='hidden';
     }
-->
</script>
<img src="nav_map.gif" width="196" height="379" usemap="#navmap">
          <map name="navmap">
            <area shape="rect" coords="1,39,190,55" href="1.html" onmouseover="showPointer(190,55)" onmouseout="hidePointer()">
            <area shape="rect" coords="1,60,190,80" href="2.html" onmouseover="showPointer(190,80)" onmouseout="hidePointer()">
            <area shape="rect" coords="1,86,190,105" href="3.html" onmouseover="showPointer(190,105)" onmouseout="hidePointer()">
            <area shape="rect" coords="1,109,190,131" href="4.html" onmouseover="showPointer(190,131)" onmouseout="hidePointer()">
            <area shape="rect" coords="1,135,190,152" href="5.html" onmouseover="showPointer(190,152)" onmouseout="hidePointer()">
            <area shape="rect" coords="1,160,190,180" href="6.html" onmouseover="showPointer(190,180)" onmouseout="hidePointer()">
          </map>

<div id='divPointer' style='visibility:hidden;position:absolute;'>
<img src='pointer.gif' border='0'>
</div>

0
 
hankknightAuthor Commented:
Thanks!

It looks good but I am getting an error:

          Line 11, Char 15: Object Required

Any ideas why?
0
 
devicCommented:
no points for me

divPoniter != divPointer
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
devicCommented:
also 'visibile' should be 'visible'
0
 
hankknightAuthor Commented:
Thanks, it works great!  
(I should have caught that myself, but I have an excuse:  I'm dilexic!)
0
 
devicCommented:
hankknight, it was example from sankarbha, I just noticed some mistakes

you should give him the points, at least split it.

you can request it on http://www.experts-exchange.com/Community_Support/

thank you
0
 
hankknightAuthor Commented:
Hi, sorry bout that sankarbha.   They should fix it soon.
0
 
hankknightAuthor Commented:
Thanks everyone, and sorry for the mix up.
0
 
devicCommented:
np and you are welcome!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.