效果圖：javascript
代碼部分：css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery.js"></script>
<style type="text/css">
div{
font-size: 12px;
border: #999 1px solid;
padding: 5px;
}
#bg{ //控制頁面背景
width: 456px;
height: 266px;
background-image: url(plowland.jpg);
}
/*控制圖片*/
img{
position: absolute;
top: 85px;
left: 195px;
}
/*控制播種按鈕*/
#seed{
background-image: url(btn_seed.png);
width: 56px;
height: 56px;
position: absolute;
top: 229px;
left: 49px;
cursor: hand;
}
/*控制生長按鈕*/
#grow{
background-image: url(btn_grow.png);
width: 56px;
height: 56px;
position: absolute;
top: 229px;
left: 154px;
cursor: hand;
}
/*控制開花按鈕*/
#bloom{
background-image: url(btn_bloom.png);
width: 56px;
height: 56px;
position: absolute;
top: 229px;
left: 259px;
cursor: hand;
}
/*控制結果按鈕*/
#fruit{
background-image: url(btn_fruit.png);
width: 56px;
height: 56px;
position: absolute;
top: 229px;
left: 368px;
cursor: hand;
}
</style>
</head>
<body>
<div id="bg">
<div id="seed"></div>
<span id="grow"></span>
<span id="bloom"></span>
<span id="fruit"></span>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#seed").bind("click",function(){
$("img").remove();
$("#bg").prepend("<img src='seed.png' />")
});
$("#grow").bind("click",function(){
$("img").remove();
$("#bg").append("<img src='grow.png' />")
});
$("#bloom").bind("click",function(){
$("img").replaceWith("<img src='bloom.png' />")
});
$("#fruit").bind("click",function(){
$("<img src='fruit.png' />").replaceAll("img");
});
});
</script>
</body>
</html>