Hello I am trying to setup a web page where, if my customers select certain options a image appears in the Right hand corner, when you select options it overlays other images on that image to show you the final product. I have this code I have played with a little bit from an example and modified to make it work however I am stuck on makeing it show the image and overlays when checkboxes are checked and hide them when unchecked.
<html><head>
<style>
.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 }
</style>
</head><body>
<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>
<script src="http://ift.tt/sKzDns"></script>
<script>
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') });
});
});
</script>
</body></html>
Aucun commentaire:
Enregistrer un commentaire