<html> <head> <title>Magic Hat</title> <mce:script type="text/javascript"><!-- function showRabbit(){ var hatImage = document.getElementById("topHat"); hatImage.setAttribute("src","rabbit-hat.gif"); var btn = document.getElementById("btn"); btn.setAttribute("value","get back~"); btn.onclick = hiddeRabbit; } function hiddeRabbit(){ var newImage = document.getElementById("topHat"); newImage.setAttribute("src","topHat.gif"); var btn = document.getElementById("btn"); btn.setAttribute("value","Hocus Pocus!"); btn.onclick = showRabbit; } // --></mce:script> </head> <body> <h1 align="center">Welcome to the DOM magic hat shop!</h1> <form name="magic-hat"> <p align="center"> <img src="topHat.gif" mce_src="topHat.gif" id="topHat"> <br> <br> <input type="button" id="btn" value="Hocus Pocus!" οnclick="showRabbit();"> </p> </form> </body> </html> 来源于:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro6/#fig1