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>

Answer 2

尝试使用CSS

参见示例（更新）：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8" />
    <style type="text/css">
        span.myClass {
            display: inline-block;
            width: 640px; /*Fix width, equals in <object> and <embed>*/
            height: 480px; /*Fix height*/
        }
        span.myClass object,
        span.myClass embed {
           display: none;
        }

        span.myClass:hover object,
        span.myClass:hover embed {
           display: block;
        }

        span.myClass:hover img {
           display: none;
        }
    </style>
    <title>Test</title>
</head>
<body>
    <span class="myClass">
        <img src="http://www.clipartbest.com/cliparts/pc5/e8r/pc5e8rMcB.gif" alt="test...">

        <!--//Embed both Flash content and alternative content using standards compliant markup -->
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="640" height="480">
            <param name="movie" value="http://www.bris.ac.uk/stemcells-msc/stemcells-msc/rolldice.swf" />
        <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data="http://www.bris.ac.uk/stemcells-msc/stemcells-msc/rolldice.swf" width="640" height="480">
        <!--<![endif]-->
            <p>Alternative content</p>
        <!--[if !IE]>-->
            </object>
        <!--<![endif]-->
        </object>
    </span>
</body>
</html>

如何用嵌入标签onmouseover替换img标签

2 个答案: