我正在尝试更改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/