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:<\/p>\n
<image id=”imagetochange” src=”pic1.jpg”>
\n<a href=”#” onclick=”imagetochange.src=’pic2.jpg'”>Change image<\/a><\/p>\n
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:<\/p>\n
<object id=”changemovie” type=”application\/x-shockwave-flash” data=”flashmovie1.swf” width=”640″ height=”400″>
\n<param id=”changethis” name=”movie” value=”flashmovie1.swf” \/>
\n<\/object><a href=”#” onclick=”changemovie.data=’flashmovie2.swf’; changethis.value=’flashmovie2.swf’;”>Change movie<\/a><\/p>\n
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:<\/p>\n
<script type=”text\/javascript”>
\nfunction changeText() {
\ndocument.getElementById(‘flashitem’).innerHTML = ‘<object type=”application\/x-shockwave-flash” data=”flashmovie2.swf” width=”640″ height=”400″> <param name=”movie” value=”flashmovie2.swf” \/> <\/object>’;
\n}
\n<div id=”flashitem”>
\n<object type=”application\/x-shockwave-flash” data=”flashmovie1.swf” width=”640″ height=”400″>
\n<param name=”movie” value=”flashmovie1.swf” \/>
\n<\/object>
\n<\/div>
\n<a href=”#” onclick=”changeText();”>Change movie<\/a><\/p>\n
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.<\/p>\n
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.<\/p>\n","protected":false},"excerpt":{"rendered":"