我正在尝试更改mouseover上的img.src以加载不同的图像。
当我尝试将this.useMap添加到函数或将useMap=“#Map”添加到HTML img标记时,代码不起作用。我需要用纯JavaScript,而不是jQuery。
我错过了什么?

<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/
好吧,我把它装成我想要的样子:
<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上触发?我只是猜测,所以如果有人有好的解释我会很感激的。

最佳答案

useMap不是属性,而是属性。您需要使用DOM方法将其添加到元素中。

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

关于javascript - 设置useMap时无法更改图像源,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20130730/

10-09 16:47