How do I make the image overlay the image when the checkbox is checked? JQuery
Hello, I am trying to set up a web page where if my clients select certain options, an image appears in the right corner, when you select options, it overlays other images in this image to show you the final product. I have this code, which I played a little bit from the example and modified it to make it work, but I am stuck with it showing the image and overlays when the checkboxes are checked, and hiding them when the checkbox is unchecked.
CSS:
.overlay {
display: none;
position: absolute;
}
#map {
position: relative;
border: 1px solid black;
width: 350px;
height: 200px;
}
#station_A {
top: 5px; left: 85px;
}
.hover {
color: green
}
HTML:
<div id="map">
<span id="station_A" class="overlay"><img src="/tn_bandannatop.png>"</span>
<span id="station_B" class="overlay">Highlight image here.</span>
</div>
<p>
<span class="hover station_A">Station Alpha</span> is one example.
</p>
JS:
jQuery(function() {
jQuery('.overlay').each(function(i, el) {
jQuery('.' + el.id)
.mouseenter(function() { jQuery(el).css('display', 'inline') })
.mouseleave(function() { jQuery(el).css('display', 'none') });
});
});
UPDATE: Fiddle here This is a setting for the mouse, but I want to change it to actions with a checkbox checked and unchecked.
UPDATE: Added script flags here. Now hover your mouse over the code to show what I want to do when the checkbox is checked.
I have something working on a JSFiddle here:
http://jsfiddle.net/dynfvzsw/7/
JQuery is actually very simple, all you have to do is:
$("input[type='checkbox']").change(function() {
var state = $(this).val();
//
$("#"+state).toggleClass("overlay");
});
Then all you have to do is add values to your checkboxes in your HTML, like this:
<input type="checkbox" name="image" value="station_A">Station Alfa<br>
<input type="checkbox" name="image" value="station_B">Station Beta
source to share
Here are some of your fiddle settings that show / hide two elements based on their respective checkbox that is checked / unchecked:
Here's the basic javascript that makes it run:
jQuery(function() {
jQuery('.overlay').each(function(i, el) {
jQuery('.' + el.id).click( function() {
$('#' + $(this).attr('class')).toggleClass('overlay', !$(this).is(":checked"));
});
});
});
Basically it adds / removes a class overlay
with a help toggleClass
that sets display
to none
:
.overlay {
display: none;
}
Here's the basic html:
<span id="station_A" class="overlay"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/tn_bandannatop.png"></span>
<span id="station_B" class="overlay">Highlight image here.</span>
<input class='station_A' type='checkbox'/>
<input class='station_B' type='checkbox'/>
source to share