如何使用onmouseover的嵌入標簽替換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>

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 個解決方案

解決方案1
1 2014-06-22 02:46:01

解決方案2
0 2014-06-22 03:05:01

如何使用onmouseover的嵌入標簽替換img標簽

問題描述

2 個解決方案

解決方案1 1 2014-06-22 02:46:01

解決方案2 0 2014-06-22 03:05:01

解決方案1
1 2014-06-22 02:46:01

解決方案2
0 2014-06-22 03:05:01