<html> <head> <title>Ajax-6: Magic Hat </title> <mce:script type="text/javascript"><!-- function ShowRabbit() { var imgHat = document.getElementById("topHad"); var imgNew = document.createElement("img"); var imgParent = imgHat.parentNode; imgNew.setAttribute("src", "../images/rabbit-hat.gif"); imgParent.insertBefore(imgNew, imgHat); imgParent.removeChild(imgHat); } // --></mce:script> </SCRIPT> </head> <body> <h1 align="center"><font color="#ff11ff"> Welcome to the Dom Magic Shop! </font> </h1> <form name="magic-hat" ID="Form1"> <p align="center"> <img src="../images/topHat.gif" mce_src="images/topHat.gif" id="topHad" style="Z-INDEX: 0" mce_style="Z-INDEX: 0"> <br> <br> <input type="button" value="Hocus Pocus!" onClick="ShowRabbit();" ID="Button1" NAME="Button1" style="Z-INDEX: 0"> </p> </form> </body> </html>