Category: JavaScript

This tutorial is designed for JavaScript newbies. It was originally written in 2009 and uses SWF objects, which are no longer supported in modern browsers. Regardless, the JavaScript can be adapted to work with any type of media.

I recently had a client who wanted a page with a SWF movie that could be changed to a different SWF by clicking on a button on the page. A while back, I did a project where the user could click a link and change the source of an image on the page using JavaScript, but changing an entire SWF seemed a little more difficult. The code to change the image to a different image looked like this:

<image id=”imagetochange” src=”pic1.jpg”>
<a href=”#” onclick=”imagetochange.src=’pic2.jpg'”>Change image</a>

This code was simple enough, so I tried modifying it to change the source of the SWF when I clicked the link. My code now looked like this:

<object id=”changemovie” type=”application/x-shockwave-flash” data=”flashmovie1.swf” width=”640″ height=”400″>
  <param id=”changethis” name=”movie” value=”flashmovie1.swf” />
</object>
<a href=”#” onclick=”changemovie.data=’flashmovie2.swf’; changethis.value=’flashmovie2.swf’;”>Change movie</a>

This worked in some browsers but it didn’t work in others, so I was forced to come up with a different solution. After some research, I was reminded of two JavaScript items that eventually made the whole thing possible: getElementById and innerHTML. After some tweaking, I ended up with a code that looked something like this:

<script type=”text/javascript”>
  function changeText() {
    document.getElementById(‘flashitem’).innerHTML = ‘<object type=”application/x-shockwave-flash” data=”flashmovie2.swf” width=”640″ height=”400″> <param name=”movie” value=”flashmovie2.swf” /> </object>’;
  }
</script>

<div id=”flashitem”>
  <object type=”application/x-shockwave-flash” data=”flashmovie1.swf” width=”640″ height=”400″>
    <param name=”movie” value=”flashmovie1.swf” />
  </object>
</div>
<a href=”#” onclick=”changeText();”>Change movie</a>

First, I created a JavaScript function called changeText(). Inside the function, I placed “document.getElementByID(‘flashitem’)”. This calls a function which searches the page for an element with the id of “flashitem”. Then I added “.innerHTML”, which tells the program that we are doing something with the innerHTML property of the specified element. I then set the value of the innerHTML property to the code for the SWF object I wanted to replace the original SWF, and closed the changeText() function. Now when the function is called, it will change the HTML inside a div with the id of “flashitem” to the code to place the new SWF on the Web page. Now I just needed to create the div and the link.

I created a new div with the code for the original SWF object inside and gave the div an id of “flashitem”. Outside the div, I then created a link to call the function changeText(), and it worked perfectly.

This article was originally published on Artistic Imposter Design.