<html> <head> <title>Ajax-6: Magic Hat </title> </head> <mce:script type="text/javascript"><!-- function ShowRabbit() { var btn = document.getElementById("btnClick"); var img = document.getElementById("topHad"); var strSrc = img.getAttribute("src"); if (strSrc == "../images/rabbit-hat.gif") { img.setAttribute("src", "../images/topHat.gif"); btn.setAttribute("value", "ClickToRabbit"); } else { btn.setAttribute("value", "ClickToOnlyHad"); img.setAttribute("src", "../images/rabbit-hat.gif"); } } // --></mce:script> <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="ClickToRabbit" onClick="ShowRabbit();" ID="btnClick" NAME="Button1" style="Z-INDEX: 0"> </p> </form> </body> </html>