Question

我正在尝试在悬停时使用javascript中的另一个图像进行图像交换。我还希望第二张图片包含一张地图。我可以得到两种工作，但不能同时工作

<html>

<A   onMouseOver="SwapOut()" onMouseOut="SwapBack()">
<IMG NAME="imageflip"   SRC="one.jpg"   WIDTH=200 HEIGHT=200 BORDER=0></A>

<map name="regionmap">
  <area shape="rect" coords="0,0,200,100" alt="foo" href="foo.html">
  <area shape="rect" coords="0,100,200,200" alt="bar" href="bar.html">
</map>

<SCRIPT LANGUAGE="JavaScript">
<!-- hide from none JavaScript Browsers

Image1= new Image(200,200)
Image1.src = "one.jpg"
Image2 = new Image(200,200)
Image2.src = "two.jpg"



function SwapOut() {
document.imageflip.src = Image2.src; 
document.imageflip.useMap = "#regionmap";

return true;
}

function SwapBack() {
document.imageflip.src = Image1.src; return true;

}

// - stop hiding -->
</SCRIPT> 




</html>

所以在浏览器中我得到的是地图而不是变化的图像。如果我注释掉document.imageflip.useMap = "#regionmap";部分，则图像交换代码可以正常工作。我是js的菜鸟......谢谢大家

Answer 1

问题似乎是您实际上是将鼠标悬停在<map>元素上，而不是<a>元素上。

所以，正在发生的事情是SwapOut()正在触发并设置<map>，然后SwapBack()会立即触发，因为您现在正在<map>而不是<a>上方{1}}。

要解决此问题，我已将事件添加到<map>元素以及<a>。

<A onMouseOver="SwapOut()" onMouseOut="SwapBack()">
  <IMG NAME="imageflip" SRC="one.jpg" WIDTH=200 HEIGHT=200 BORDER=0>
</A>

<map name="regionmap" onMouseOver="SwapOut()" onMouseOut="SwapBack()">
  <area shape="rect" coords="0,0,200,100" alt="foo" href="foo.html">
  <area shape="rect" coords="0,100,200,200" alt="bar" href="bar.html">
</map>

我不确定是否需要，但我还将document.imageflip.useMap = null;添加到SwapBack()。

DEMO：https://jsfiddle.net/8968zL0v/

在javascript中更改地图属性

1 个答案: