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

图片地图鼠标悬停突出显示

2 个答案: