更新

Question

我基本上有两个图像（复选框），当单击每个图像时，它会变为另一个图像。但是，它只能在两个图像之间切换。我想添加第三个，我怎么能这样做？

HTML：

<style>
body  {
    background-image: url("http://i.imgur.com/kcmsgdr.png");
    background-color: #cccccc;
}
</style>

CSS：

#a{
    margin: 3.55cm 5.025cm;
    height: 40px;
    width: 40px;
    content: url(http://i.imgur.com/59fHyah.png);
}
#a:checked {
    content: url(http://i.imgur.com/zgwd1n1.png);
}



#b{
    margin: 3.55cm -0.65cm;
    height: 40px;
    width: 40px;
    content: url(http://i.imgur.com/59fHyah.png);
}
#b:checked {
    content: url(http://i.imgur.com/zgwd1n1.png);
}

#b{
    margin: 3.55cm -0.65cm;
    height: 40px;
    width: 40px;
    content: url(http://i.imgur.com/59fHyah.png);
}
#b:checked {
    content: url(http://i.imgur.com/zgwd1n1.png);
}

Codepen：http://codepen.io/Coto16/pen/ENRdBv

Answer 1

使用jquery很容易：

＆＃13;

<html>
	<input id="b" type="checkbox" onclick="changeImg()"/>
</html>

<style>
	#b{
    	height: 40px;
    	width: 40px;
    	content: url(img1.png);
	}
</style>

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"> </script>

<script>
var changeImg = function(){

	switch($("#b").css("content")){

		case  "url(img1.png)":
			$("#b").css("content", "url(img2.png)");
		break;

		case "url(img2.png)":
			$("#b").css("content", "url(img3.png)");
		break;

		case  "url(img3.png)":
			$("#b").css("content", "url(img1.png)");
		break;

	}
};
</script>

＆＃13;

Answer 2

如果您不反对JavaScript，可以使用以下代码：

var checkbox = document.getElementById('checkbox');
var checkbox_1 = document.getElementById('checkbox_1');
var checkbox_2 = document.getElementById('checkbox_2');
var img_1 = 'http://i.imgur.com/59fHyah.png';
var img_2 = 'http://i.imgur.com/zgwd1n1.png';

checkbox.onclick = function () {
    if (checkbox.src == img_1) {
        checkbox.src = img_2;
    } else if (checkbox.src == img_2) {
        checkbox.src = img_1;
    }
}
checkbox_1.onclick = function () {
    if (checkbox_1.src == img_1) {
        checkbox_1.src = img_2;
    } else if (checkbox_1.src == img_2) {
        checkbox_1.src = img_1;
    }
}
checkbox_2.onclick = function () {
    if (checkbox_2.src == img_1) {
        checkbox_2.src = img_2;
    } else if (checkbox_2.src == img_2) {
        checkbox_2.src = img_1;
    }
}

<img src="http://i.imgur.com/59fHyah.png" id="checkbox" width="32"/>
<img src="http://i.imgur.com/59fHyah.png" id="checkbox_1" width="32"/>
<img src="http://i.imgur.com/59fHyah.png" id="checkbox_2" width="32"/>

更新

在你的问题中，你使用三个按钮。所以，我在我的代码中添加了两个按钮。

单击HTML / CSS更改图像

2 个答案:

更新