How can I replace img tag with embed tag onmouseover
Question
I want to replace a image with a embed content when I hover over the image. I can replace image with image easily with below code but not easy with embed:
<img src="http://www.clipartbest.com/cliparts/pc5/e8r/pc5e8rMcB.gif" onmouseover="this.src='http://www.jakesonline.org/black.gif'" alt="" />
The code replace a white image with a black image, test it here: http://www.jmarshall.com/easy/html/testbed.html
But how can I replace a image with a embed swf using the same method as my above code, easy without any library like jquery ?
Example when I hover over this image http://www.clipartbest.com/cliparts/pc5/e8r/pc5e8rMcB.gif then it replace that image with
http://bris.ac.uk/stemcells-msc/stemcells-msc/rolldice.swf - <embed src="http://www.bris.ac.uk/stemcells-msc/stemcells-msc/rolldice.swf" />
Example (not work for sure, just my dream):
<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" />") />
Thank!
2 answers
solution1
1 2014-06-22 02:46:01
Try replacing the innerHTML of a parent DOM:
<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>
If you want it to switch back onmouseout , then write the function to toggle back and forth between src s, like:
<div id="thisOne" onmouseover="this.innerHTML='<embed src="http://www.jakesonline.org/black.swf" height="240" width ="360" /\>'" onmouseout="this.innerHTML='<img src="http://www.clipartbest.com/cliparts/pc5/e8r/pc5e8rMcB.gif" />'" >
<img src="http://www.clipartbest.com/cliparts/pc5/e8r/pc5e8rMcB.gif" />
</div>
solution2
0 2014-06-22 03:05:01
Try use CSS
See example (update):
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.