Image Map Mouseover highlight

Question

I am making a image map for our site navigation manual, I have generated a set of code which a div show on mouse hover...

EDIT

The code is all working however I need to highlight the area when mouse hover, is there an easy way to do this, I have tried to use other code however it will interrupt the original java script so the div no longer showing, any help is greatly appreciated!

function showHideDivs(indx) {
  hideDivs();
  oShowHideDivs[indx].style.display = 'block';
}

function hideDivs() {
  for (i = 0; i < oShowHideDivs.length; i++) {
    oShowHideDivs[i].style.display = 'none';
  }
}
window.onload = function() {
  oShowHideDivs = document.getElementById('container').getElementsByTagName('div');
  var oMap = document.getElementById('myMap');
  for (i = 0; i < oMap.areas.length; i++) {
    oMap.areas[i].indx = i;
    oMap.areas[i].onmouseover = function() {
      showHideDivs(this.indx);
    }
    oMap.areas[i].onmouseout = hideDivs;
  }
}

#container div {
  display: none;
}

<div>
  <img src="website.jpg" alt="" usemap="#myMap" />
</div>
<div id="container">
  <div id="home">This is home</div>
  <div id="about">This is about</div>
  <div id="contact">This is contact</div>
</div>
<map name="myMap" id="myMap">
    <area shape="rect" coords="0,0,100,100" href="" alt="home" />
    <area shape="rect" coords="100,0,200,100" href="" alt="about" />
    <area shape="rect" coords="0,100,100,200" href="" alt="contact" />
    </map>

score 0 · Answer 1 · answered Jun 28 '17 at 12:25

0

Refer to the below code from W3C school.

    <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

You can refer to the link HTML map Tag

answered Jun 28 '17 at 12:25

Abhi

104
5

don't see how this code is going to work, the click refer to a new site rather than having the hover over div fixed, also I want to know how do I make the hover area highlighted with border before click on – nsic Jun 28 '17 at 23:53
Please check this link, http://www.outsharked.com/imagemapster/default.aspx?demos.html# – Abhi Jun 30 '17 at 08:33

score 0 · Answer 2 · answered Jun 29 '17 at 01:18

In the body of your onload function,

oShowHideDivs = document.getElementById('container').getElementsByTagName('div');
  var oMap = document.getElementById('myMap');
  for (i = 0; i < oMap.areas.length; i++) {
    oMap.areas[i].indx = i;
    oMap.areas[i].onmouseover = function() {
      showHideDivs(this.indx);
    }

I would recommend a few small changes.

oMap.areas[i].indx = 1 does not make sense. oMap is a nodelist of <area> tags. The <area> element does not have an attribute of indx. If oMap were an array of JavaScript objects, then setting the property of indx would be okay.

Looking at this part

oMap.areas[i].onmouseover = function() {
      showHideDivs(this.indx);
    }

It looks like you are trying to identify a related div by an index.

What would be valid HTML is to give the div a data-idnx attribute. It can achieve the same effect like this:

for (i = 0; i < oMap.areas.length; i++) {
    var area = oMap.areas[i];

    area.dataset.idnx = i;
    area.onmouseover = MapshowHideDivs(i);
    area.onmouseout = hideDivs();
}

So all together

// Modern version of window.onload = function()

(function() {
// Variable declarations at the top

// Function declarations
    oShowHideDivs = document.getElementById('container').getElementsByTagName('div');
    var oMap = document.getElementById('myMap');

    function showHideDivs(indx) {
      hideDivs();
      oShowHideDivs[indx].style.display = 'block';
    }

    function hideDivs() {
      for (i = 0; i < oShowHideDivs.length; i++) {
        oShowHideDivs[i].style.display = 'none';
      }
    }


 // Body of the script
    for (i = 0; i < oMap.areas.length; i++) {
        var area = oMap.areas[i];

        area.dataset.idnx = i;
        area.onmouseover = MapshowHideDivs(i);
        area.onmouseout = hideDivs();
    }
}

sorry, I have replaced current javas script with your update code, it's not working, even the hover over div won't show — nsic, Jun 29 '17 at 01:33
It may not be perfect as it is untested. Read the console to see if any errors come up and adjust it to fit your needs. — Naltroc, Jun 29 '17 at 01:52
sorry if I have made myself unclear, the original code I have posted was working, I am just trying to fix the div when click on hover area instead of change when hover off, I have more information to list in the div for client to see and click, cheers — nsic, Jun 29 '17 at 02:00

Image Map Mouseover highlight

2 Answers2