<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Magic Hat</title>
<script language="JavaScript" type="text/javascript">
function showRabbit() {
var hatImage = document.getElementById("topHat");
hatImage.setAttribute("src", "http://p.blog.csdn.net/images/p_blog_csdn_net/zhaoxiaoyang5156/319232/o_rabbit-hat.gif");
// var newImage = document.createElement("img");
// newImage.setAttribute("src", "rabbit-hat.gif");
// newImage.setAttribute("id","topHat");
// var imgParent = hatImage.parentNode;
// imgParent.insertBefore(newImage, hatImage);
// imgParent.removeChild(hatImage);
// imgParent.replaceChild(newImage, hatImage);
var button = document.getElementById("hocusPocus");
button.setAttribute("value", "Get back in that hat!");
button.onclick = hideRabbit;
}
function hideRabbit() {
var hatImage = document.getElementById("topHat");
hatImage.setAttribute("src", "http://p.blog.csdn.net/images/p_blog_csdn_net/zhaoxiaoyang5156/319232/o_topHat.gif");
var button = document.getElementById("hocusPocus");
button.setAttribute("value", "Hocus Pocus!");
button.onclick = showRabbit;
}
</script>
<style type="text/css">
.center{
text-align: center;
}
</style>
</head>
<body>
<h1 class="center">Welcome to the DOM Magic Shop!</h1>
<form id="magic-hat" action="">
<p class="center">
<img src="http://p.blog.csdn.net/images/p_blog_csdn_net/zhaoxiaoyang5156/319232/o_topHat.gif" id="topHat" alt="帽子" />
<br /><br />
<input type="button" value="Hocus Pocus!" onclick="showRabbit();" id="hocusPocus" />
</p>
</form>
</body>
</html>