我的小农场

首先是创建一个外部名称 js是夹包

加入所需要的图片设置CSS样式
#bg9 {
width: 500px;
height: 280px;
background-image: url(img/bg9.jpg);
background-repeat: no-repeat;
position: absolute;
}

		img {
			position: absolute;
			width: 56px;
			height: 56px;
		}
		
		#bg10 {
			width: 56px;
			height: 56px;
			background-image: url(img/bg6.png);
			top: 226px;
			left: 50px;
			position: absolute;
			cursor: hand;
		}
		
		#bg4 {
			width: 56px;
			height: 56px;
			background-image: url(img/bg4.png);
			top: 226px;
			left: 130px;
			position: absolute;
			cursor: hand;
		}
		
		#bg2 {
			width: 56px;
			height: 56px;
			background-image: url(img/bg2.png);
			top: 226px;
			left: 210px;
			position: absolute;
			cursor: hand;
		}
		
		#bg3 {
			width: 56px;
			height: 56px;
			background-image: url(img/bg3.png);
			top: 226px;
			left: 290px;
			position: absolute;
			cursor: hand;
		}
		
		#bg5 {
			width: 56px;
			height: 56px;
			background-image: url(img/bg5.png);
			top: 226px;
			left: 370px;
			position: absolute;
			cursor: hand;
		}
		
		.border {
			border: 2px solid red;
			border-radius: 50px;
		}
		/style>

		给生长  开花  结果 收获按钮设置点击事件
		<script type="text/javascript">
		var img = "bg10.png"
		$(function() {

// $("#bg10").on(“click”, function() {
$(this).addClass(“border”);
$("#bg9").on(“click”, function(e) {
$("").addClass(“img1”).prependTo("#bg9").css(“top”, e.pageY - 40).css(“left”, e.pageX - 30);
});
// });
//生长按钮设置点击事件
$("#bg4").on(“click”, function() {

				$(this).addClass("border");
				img = "bg8.png";

			});
				
			$("#bg10").on("click", function() {

					$(this).addClass("border");
					img = "bg10.png";

				});
				
				//给开花按钮设置点击事件
				$("#bg2").on("click", function() {

					$(this).addClass("border");
					img = "bg1.png";

				});	
				
					//给结果按钮设置点击事件
					$("#bg3").on("click", function() {

					$(this).addClass("border");
					img = "bg7.png";

				});	
				
						$("#bg5").on("click", function() { //给收获设置按钮点击事件

					$(this).addClass("border");
					img = "bg7.png";

				});	
		});
	</script>

四个按钮

/

//农 pan id="bg10"> 播种> span id="bg4"> //生长 span id="bg2"> //开花 span id="bg3"> //结果 span id="bg5"> //收获 body>

实现结果:
无论点击那个按钮都可以实现自己想要的