Javascript 图像贴图鼠标悬停突出显示

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

编辑

该代码是所有的工作，但我需要突出该地区时，鼠标悬停，有没有一个简单的方法来做到这一点，我已经尝试使用其他代码，但它会中断原来的java脚本，使div不再显示，任何帮助是非常感谢

函数showHideDivs（indx）{
hideDivs（）；
OSHOWIDEDIVS[indx].style.display='block'；
}
函数hideDivs（）{
对于（i=0；i

#容器分区{
显示：无；
}

这是家
这是关于
这是联系人

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

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

看起来您正试图通过索引识别相关的div

有效的HTML是给div一个
dataidnx
属性。它可以达到如下相同的效果：

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

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

for（i=0；i

总而言之

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

//window.onload=function（）的现代版本
（功能（）{
//顶部的变量声明
//函数声明
oshowhidivs=document.getElementById（'container'）.getElementsByTagName（'div'）；
var oMap=document.getElementById（'myMap'）；
函数showHideDivs（indx）{
hideDivs（）；
OSHOWIDEDIVS[indx].style.display='block'；
}
函数hideDivs（）{
对于（i=0；i
看不出此代码将如何工作，单击指的是一个新站点，而不是将鼠标悬停在div上，我还想知道如何在单击前用边框突出显示鼠标悬停区域。请检查此链接，抱歉，我已将当前的javas脚本替换为您的更新代码，它不起作用，甚至鼠标悬停在div上也不会起作用t显示它可能不完美，因为它未经测试。请阅读控制台以查看是否出现任何错误，并根据您的需要进行调整。抱歉，如果我弄不清楚，我发布的原始代码正在工作，我只是尝试在单击鼠标悬停区域时修复div，而不是在鼠标悬停关闭时进行更改，我可以在div中为clie列出更多信息nt查看并单击，干杯
// 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();
    }
}