My current system is set up to overlay the image when you check the checkboxes. However, I'm facing an issue with positioning the image inside the computer screen so it's not right at the edge. Can anyone provide assistance with this?
<html><head>
<style>
.overlay {
display: none;
position: absolute;
}
.right {
position: absolute;
right: 0px;
width: 300px;
border:3px solid #8AC007;
padding: 10px;
}
#map {
position: relative;
right: -780px;
width: 452px;
height: 344px;
background: url(BLANK-COMPUTER-SCREEN.png);
}
#station_A { top: 5px; left: 85px }
#station_B { top: 150px; left: 180px }
.hover { color: green }
</style>
<div id="map" >
<span id="station_A" class="overlay"><img style="background:url(/BLANK-COMPUTER-SCREEN.PNG)" src="/tn_WhiskersPrinceworkup.png" /></span>
<span id="station_B" class="overlay">Highlight image here.</span>
</div>
<p>
<h2>Choose a Shirt</h2>
<form>
<input type="checkbox" name="image" value="station_A">Station Alfa<br>
<input type="checkbox" name="image" value="station_B">Station Beta
<input type="checkbox" name="image" value="bandanna" id="checkbox1">Bandanna
</form>
</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("input[type='checkbox']").change(function () {
var state = $(this).val();
$("#" + state).toggleClass("overlay");
});
$('#checkbox1').change(function () {
if (this.checked) $('#map').fadeIn('slow');
else $('#map').fadeOut('slow');
});
});
</script>