Question

我正在尝试在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上设置一个全新的元素，鼠标悬停时不会触发鼠标事件？我只是猜测，所以如果有人有一个很好的解释我会很感激。

Answer 1

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

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

设置useMap时无法更改图像源

1 个答案: