图像映射鼠标悬停突出显示

Question

我正在为我们的网站导航手册制作图像地图，我已经生成了一组代码，在鼠标悬停时显示 div...

编辑

代码一切正常，但是我需要在鼠标悬停时突出显示该区域，有没有简单的方法可以做到这一点，我尝试使用其他代码但是它会中断原始的 java 脚本，因此 div 不再显示，非常感谢任何帮助！

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>

Answer 1

参考以下来自 W3C 学校的代码。

    <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>

可以参考链接HTML map Tag

Answer 2

在 onload 函数的主体中，

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].indx = 1 没有意义。 oMap 是 <area> 标签的节点列表。 <area> 元素没有indx 的属性。如果oMap 是一个JavaScript 对象数组，那么设置indx 的属性就可以了。

看这部分

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

您似乎正试图通过索引来识别相关的 div。

有效的 HTML 是给 div 一个data-idnx 属性。它可以达到这样的效果：

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

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

大家一起来

// 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();
    }
}