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

Share Improve this question Follow asked Dec 24, 2014 at 19:12 Rahul ShahRahul Shah 1,40744 gold badges2323 silver badges4242 bronze badges 1

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

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.