設置useMap時無法更改圖像源

我試圖更改mouseover上的img.src以加載不同的圖像。
當我嘗試將this.useMap添加到函數中或將usemap =「＃Map」添加到HTML img標記中時，該代碼不起作用。我需要保持它純粹的JavaScript，沒有jQuery。
我在這裏錯過了什麼？
設置useMap時無法更改圖像源

<body> 
<img id="stickyfooterimage" src="https://d3rm69wky8vagu.cloudfront.net/mediaspot/1.6089.gif" /> 
<map name="Map" id="Map"> 
    <area shape="rect" coords="0,0,300,68" href="http://yahoo.com" target="_blank" /> 
    <area shape="rect" coords="0,69,300,150" href="http://google.com" target="_blank" /> 
    <area shape="rect" coords="0,151,300,250" href="http://aol.com" target="_blank" /> 
</map> 
</body> 
<script> 
var stickyFooterMouseOver = "https://d3rm69wky8vagu.cloudfront.net/mediaspot/1.6088.gif" 

var stickyImage = document.getElementById('stickyfooterimage'); 

var stickyFooterMouseDefault = stickyImage.src; 

stickyImage.onmouseover = function() { 
    this.src = stickyFooterMouseOver; 
    //this.useMap = "#Map"; 
}; 

stickyImage.onmouseout = function() { 
    this.src = stickyFooterMouseDefault; 
}; 
<script>

代碼在這裏：http://jsfiddle.net/connectedcat/rt9sm/

OK，我操縱它的工作就是我想要的：

<body> 

    <img id="stickyfooterimage" src="https://d3rm69wky8vagu.cloudfront.net/mediaspot/1.6089.gif" usemap="#Map"/> 
    <map name="Map" id="Map"> 
     <area shape="rect" coords="0,0,300,69" href="http://yahoo.com" target="_blank" onmouseover="useBig()" onmouseout="useSmall()"/> 
     <area shape="rect" coords="0,69,300,150" href="http://google.com" target="_blank" onmouseover="useBig()" onmouseout="useSmall()"/> 
     <area shape="rect" coords="0,150,300,250" href="http://aol.com" target="_blank" onmouseover="useBig()" onmouseout="useSmall()"/> 

    </map> 



</body> 
<script> 


    var stickyFooterMouseOver = "https://d3rm69wky8vagu.cloudfront.net/mediaspot/1.6088.gif" 


    var stickyImage = document.getElementById('stickyfooterimage'); 

    var stickyFooterMouseDefault = stickyImage.src; 

    function useBig() { 
     stickyImage.src = stickyFooterMouseOver; 
    } 
    function useSmall() { 
     stickyImage.src = stickyFooterMouseDefault; 
    } 

</script>

我還是想知道是怎麼回事。似乎將usemap屬性分配給img會在img頂部設置一個全新元素，並且鼠標事件不會在mouseover和mouseout上觸發？我只是猜測，所以如果任何人有一個很好的解釋，我會很感激。

來源

2013-11-21 Maxim Safioulline

useMap不是屬性，而是屬性。您需要使用DOM方法將其添加到元素。

this.setAttribute("usemap", "Map");

來源

2013-11-21 20:25:44

不起作用。它設置usemap =「Map」。我需要usemap =「＃Map」，根據規格：http：//www.w3schools.com/tags/att_img_usemap.asp
如果我將它設置爲this.setAttribute（'usemap'，'#Map'） - 圖像的src不會改變。 –

我認爲在屏幕上就地顯示並隱藏一個並顯示另一個，而不是交換usemap和src會更容易。 –

設置useMap時無法更改圖像源

回答

相關問題