CODEWITHSUNDEEP
htmlcss
Coto TheArcher
Coto TheArcher

Reputation: 363

Change Image on click HTML/CSS

I basically have two images (checkboxes), that when each one is clicked, it changes to a different image. However, it can only switch between two images only. I wanted to add a third one, how could I do that?

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

Upvotes: 2

Views: 7171

Answers (2)

Naman
Naman

Reputation: 1527

If you are not against JavaScript, you can use the following code:

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"/>

Update

In your question, you'r using three buttons. So, I'm adding two more buttons to my code.

Upvotes: 1

Wilson de Freitas Jr.
Wilson de Freitas Jr.

Reputation: 77

with jquery its easy:

<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>

Upvotes: 1

Related Questions