i have working system check checkboxes overlays image however, problem having getting image postioned inside computer screen it's not on edge. cany 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 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> fiddle here.
you need set position:absolute #station_a , #station_b instead of .overlay, because use .overlay toggle in jquery, loose property.
here snippet:
$(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'); }); });.overlay { display: none; } .right { position: absolute; right: 0px; width: 300px; border: 3px solid #8ac007; padding: 10px; } #map { position: relative; /*right: -780px; removed demo purposes */ width: 452px; height: 344px; background: url(//preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/blank-computer-screen.png) no-repeat; } #station_a { top: 8%; /* whatever */ left: 5%; /* whatever */ position: absolute; } #station_b { top: 45%; /* whatever */ left: 15%; /* whatever */ position: absolute } .hover { color: green }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="map"> <span id="station_a" class="overlay"><img style="background:url(//preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/blank-computer-screen.png)" src="//lorempixel.com/270/240" /></span> <span id="station_b" class="overlay">highlight image here.</span> </div> <p> <h2>choose 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>
Comments
Post a Comment