javascript - 如何在鼠标悬停时用嵌入标签替换 img 标签

Question

当我将鼠标悬停在图像上时，我想用嵌入内容替换图像。我可以使用下面的代码轻松地用图像替换图像，但使用嵌入则不容易:

<img src="http://www.clipartbest.com/cliparts/pc5/e8r/pc5e8rMcB.gif" onmouseover="this.src='http://www.jakesonline.org/black.gif'" alt="" />

代码用黑色图像替换白色图像，在这里测试:http://www.jmarshall.com/easy/html/testbed.html

但是如何使用与上面代码相​​同的方法用嵌入的 swf 替换图像，无需任何像 jquery 这样的库就可以轻松实现？

当我将鼠标悬停在该图像上时的示例 http://www.clipartbest.com/cliparts/pc5/e8r/pc5e8rMcB.gif然后用

替换该图像

http://bris.ac.uk/stemcells-msc/stemcells-msc/rolldice.swf - <embed src="http://www.bris.ac.uk/stemcells-msc/stemcells-msc/rolldice.swf" />

示例(不一定有效，只是我的梦想):

<img src="http://www.clipartbest.com/cliparts/pc5/e8r/pc5e8rMcB.gif" onmouseover=Replace("<embed src="http://www.bris.ac.uk/stemcells-msc/stemcells-msc/rolldice.swf" />") />

谢谢!

Answer 1

尝试替换父 DOM 的innerHTML:

<div id="thisOne">
  <img src="http://www.clipartbest.com/cliparts/pc5/e8r/pc5e8rMcB.gif" onmouseover="doit(this.parentNode, '<embed src=\"http://www.jakesonline.org/black.swf\" height=\"240\" width =\"360\" />');" />
</div>

<script>
function doit(elem, theSrc) {
   elem.innerHTML = theSrc;
}
</script>

如果您希望它切换回 onmouseout，请编写在 src 之间来回切换的函数，例如:

<div id="thisOne" onmouseover="this.innerHTML='<embed src=&quot;http://www.jakesonline.org/black.swf&quot; height=&quot;240&quot; width =&quot;360&quot; /\>'" onmouseout="this.innerHTML='<img src=&quot;http://www.clipartbest.com/cliparts/pc5/e8r/pc5e8rMcB.gif&quot; />'" >
  <img src="http://www.clipartbest.com/cliparts/pc5/e8r/pc5e8rMcB.gif" />
</div>