设置 useMap 时无法更改图像源答案

【问题标题】：Can't change image source when useMap is set设置 useMap 时无法更改图像源
【发布时间】：2013-11-22 05:09:59
【问题描述】：

我正在尝试更改鼠标悬停时的 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 时触发？我只是猜测，所以如果有人有好的解释，我将不胜感激。

【问题讨论】：

标签： javascript html dom mouseevent dom-manipulation

【解决方案1】：

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

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

【讨论】：

不起作用。它设置 usemap="Map"。我需要 usemap="#Map"，根据规范：w3schools.com/tags/att_img_usemap.asp
如果我将其设置为 this.setAttribute('usemap', '#Map') - 图像 src 不会改变。
我认为将两者都放在屏幕上并隐藏一个并显示另一个而不是交换 usemap 和 src 会更容易。