[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 589
  • Last Modified:

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!


0
hankknight
Asked:
hankknight
  • 4
  • 4
2 Solutions
 
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now