我正在尝试更改鼠标悬停时的 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/