影像地圖將鼠標置於突出

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