I need to load an .swf file after we click on an image

The .swf file loads successfully after we click on the image,but it loads the .swf below the image.I need to replace the img with .swf(in short,hide the img).

<script type="text/javascript" src=".2/swfobject.js"></script>

<script type="text/javascript">

function loadSWF(url){
    swfobject.embedSWF(url, "flashcontent", "550", "400", "9");
}
document.getElementById('iii').style.display = 'none';

</script>

<p><a href=".swf" onclick="loadSWF(this.href); return false;">


<div id="iii" class="iii">
<img id="my_image17" border="0" src=".jpg" />
</div>

</a></p>

<div id="flashcontent"></div>

I need to hide/remove the class/id "iii" (within which the img tag lies).However the code doesn't seem to work only with respect to hiding/removing of img. Any tips?

I need to load an .swf file after we click on an image

The .swf file loads successfully after we click on the image,but it loads the .swf below the image.I need to replace the img with .swf(in short,hide the img).

<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/swfobject/2.2/swfobject.js"></script>

<script type="text/javascript">

function loadSWF(url){
    swfobject.embedSWF(url, "flashcontent", "550", "400", "9");
}
document.getElementById('iii').style.display = 'none';

</script>

<p><a href="http://www.leconbre./stock/coccyminimini1.swf" onclick="loadSWF(this.href); return false;">


<div id="iii" class="iii">
<img id="my_image17" border="0" src="http://4.bp.blogspot./-7Ij8T9BvULw/VJWltsHNmhI/AAAAAAAANDI/a76wpzm_a-E/s1600/world%2Bmap%2Bcolor_1.jpg" />
</div>

</a></p>

<div id="flashcontent"></div>

I need to hide/remove the class/id "iii" (within which the img tag lies).However the code doesn't seem to work only with respect to hiding/removing of img. Any tips?

• javascript
• html
• flash

• You're trying to manipulate elements that have not been read in yet by the DOM parser – AdamSchuld Commented Jan 23, 2015 at 6:34

2 Answers 2

I think this is what you're looking for.

I made a js fiddle for you. http://jsfiddle/q7a96h14/1/

html

<div id="iii" class="iii">
  <img id="my_image17" border="0" src="http://4.bp.blogspot./-7Ij8T9BvULw/VJWltsHNmhI/AAAAAAAANDI/a76wpzm_a-E/s1600/world%2Bmap%2Bcolor_1.jpg" /> 
</div>

js

$(function(){
  var $img       = $("#my_image17")
    , $container = $("#iii");
  $img.on("click", function() {
    $img.remove();
    $container.html("<embed src='http://www.leconbre./stock/coccyminimini1.swf' width='550'  height='400'/>");
    $container.removeClass().removeAttr("id");
  });
});

Looks like ...

function loadSWF(url){
    swfobject.embedSWF(url, "flashcontent", "550", "400", "9");
    document.getElementById('iii').style.display = 'none';
}

... the hide should occur when the load does.