影像地图将鼠标置于突出

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

它看起来就像你正在试图通过一个指数来识别相关的股利。

什么是有效的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(); 
    } 
}