You can do this with this simple javascript function, with Jquery:
If you had the same image for all Abels and only rotated the images, you would have to do this only once. As follows
$('input[type="checkbox"]').click(function() {
if ($(this).is(":checked")) {
$(this).closest('div').children('label').children('img').attr("src", "imagem-vermelha");
}else{
$(this).closest('div').children('label').children('img').attr("src", "imagem-verde");
}
})
Unfortunately, in your current case, you should repeat this for all checkboxes, since each label has different images.
I used the method .closest() which basically seeks the element attenuate, and the method .children(), who seeks the child elements through the argument, which in the case was a img.
Would look like this:
$('#i1').click(function() {
if ($(this).is(":checked")) {
$(this).closest('div').children('label').children('img').attr("src", "http://franceimagecoaching.com.br/wp-content/themes/biznex/img/blog-type-article.png");
}else{
$(this).closest('div').children('label').children('img').attr("src", "http://i.imgur.com/OpIgi4H.png");
}
})
$('#i2').click(function() {
if ($(this).is(":checked")) {
$(this).closest('div').children('label').children('img').attr("src", "http://franceimagecoaching.com.br/wp-content/themes/biznex/img/blog-type-article.png");
}else{
$(this).closest('div').children('label').children('img').attr("src", "http://i.imgur.com/8Iyy2C4.png");
}
})
$('#i3').click(function() {
if ($(this).is(":checked")) {
$(this).closest('div').children('label').children('img').attr("src", "http://franceimagecoaching.com.br/wp-content/themes/biznex/img/blog-type-article.png");
}else{
$(this).closest('div').children('label').children('img').attr("src", "http://i.imgur.com/M6hK389.png");
}
})
$('#i4').click(function() {
if ($(this).is(":checked")) {
$(this).closest('div').children('label').children('img').attr("src", "http://franceimagecoaching.com.br/wp-content/themes/biznex/img/blog-type-article.png");
}else{
$(this).closest('div').children('label').children('img').attr("src", "http://i.imgur.com/M5UHtdt.png");
}
})
$('#i5').click(function() {
if ($(this).is(":checked")) {
$(this).closest('div').children('label').children('img').attr("src", "http://franceimagecoaching.com.br/wp-content/themes/biznex/img/blog-type-article.png");
}else{
$(this).closest('div').children('label').children('img').attr("src", "http://i.imgur.com/XWX98Fc.png");
}
})
$('#i6').click(function() {
if ($(this).is(":checked")) {
$(this).closest('div').children('label').children('img').attr("src", "http://franceimagecoaching.com.br/wp-content/themes/biznex/img/blog-type-article.png");
}else{
$(this).closest('div').children('label').children('img').attr("src", "http://i.imgur.com/cdasBJA.png");
}
})
.imagens input[type="checkbox"] {
visibility: hidden;
}
.imagens label {
display: block;
border: 1px solid #666;
width: 50px;
}
.imagens input[type="checkbox"]:checked+label {
border-color: #ccf;
}
.imagens img {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 700px; height: 850px; position: absolute; left: -20px;">
<div class="imagens" style="position: static; left: 90px; width: 130px; height: 129px; ">
<div style="position: absolute; left: 55px; ">
<div style="position: absolute; left: 29px; top: 38px;"><img src="http://i.imgur.com/Ww2xT7t.png" /></div>
<div style="position: absolute; left: 7px; top: 2px">
<input type="checkbox" name="imagem" id="i1" />
<label for="i1"><img src="http://i.imgur.com/OpIgi4H.png" /></label>
</div>
<div style="position: absolute; left: 50px; top: -15px;">
<input type="checkbox" name="imagem" id="i2" />
<label for="i2"><img src="http://i.imgur.com/8Iyy2C4.png" /></label>
</div>
<div style="position: absolute; left: 94px; top: 5px">
<input type="checkbox" name="imagem" id="i3" />
<label for="i3"><img src="http://i.imgur.com/M6hK389.png" /></label>
</div>
<div style="position: absolute; left: 97px; top: 55px">
<input type="checkbox" name="imagem" id="i4" />
<label for="i4"><img src="http://i.imgur.com/M5UHtdt.png" /></label>
</div>
<div style="position: absolute; left: 49px; top: 90px;">
<input type="checkbox" name="imagem" id="i5" />
<label for="i5"><img src="http://i.imgur.com/XWX98Fc.png" /></label>
</div>
<div style="position: absolute; left: 3px; top: 55px">
<input type="checkbox" name="imagem" id="i6" />
<label for="i6"><img src="http://i.imgur.com/cdasBJA.png" /></label>
</div>
</div>
</div>
</div>
In javascript, in each checkbox, you would have to put each image for when it was checked and when it was unchecked.
In your HTML I made some changes, with tidy the closures of some tags and organized the cedars, giving them, a position: absolute and manually positioning them.
UPDATE
So the chair turns red without the need for the click, created a role for each checkbox. For example, that of #i1.
$('#i1').click(i1);
function i1() {
if ($('#i1').is(":checked")) {
$('#i1').closest('div').children('label').children('img').attr("src", "http://franceimagecoaching.com.br/wp-content/themes/biznex/img/blog-type-article.png");
} else {
$('#i1').closest('div').children('label').children('img').attr("src", "http://i.imgur.com/OpIgi4H.png");
}
}
And the end of the code, call all functions:
i1();
i2();
...
i6();
Example - Jsfiddle
I used an example image since I didn’t have each red chair.
In the case of checkbox marked shows the red chair, and unchecked green?
– gustavox
The last two
divsare closing before thelabel...– gustavox
yes this... marked red and unchecked green
– Fabio Henrique
I think you can do this if it’s svg images. See here a related question. And I’m not sure, but I don’t think changing the image can be done with CSS. It can’t be with JS?
– gustavox