I have changed one of my checkboxes into a image checkbox, I have tested it to see if it applies the overlay in the computer screen it does not. I am stumped and can not figure it out, any one able to help?
<html><head>
<style>
.overlay {
display: none;
}
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #8AC007;
padding: 10px;
}
#map {
position: relative;
/*right: -780px; removed for demo purposes */
width: 452px;
height: 344px;
background: url(//preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/BLANK-COMPUTER-SCREEN.png) no-repeat;
}
#station_A {
top: 8%; /* whatever you like */
left: 5%; /* whatever you like */
position: absolute;
}
#station_B {
top: 45%; /* whatever you like */
left: 15%; /* whatever you like */
position: absolute
}
.hover {
color: green
}
input[type=checkbox] {
display:none;
}
input[type=checkbox] + label
{
background: #999;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label
{
background: #0080FF;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
</style>
<div id="map">
<span id="station_A" class="overlay"><img style="background:url(//preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/BLANK-COMPUTER-SCREEN.png)" src="/bandannatop.png" class="filter-tint" data-pb-tint-opacity="0.5" data-pb-tint-colour="#F69023" /></span>
<span id="station_B" class="overlay">Highlight image here.</span>
</div>
<p>
<h2>Choose a Shirt</h2>
<form id="form1">
<img src="bandannatop.png" title="barney" id="barneyCheckImage" />
<input type="checkbox" id="image" name="imgCheck" value="station_A" style="visibility: hidden;" />
<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://ift.tt/sKzDns"></script>'
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript" src="paintbrush.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');
});
});
$(document).ready(function() {
$('form#form1').find('img#barneyCheckImage').toggle(
function(){
$(this).css('border', '1px solid green');
$('form#form1').find('input[id=image]').attr('checked', 'checked');
},
function(){
$(this).css('border', 'none');
$('form#form1').find('input[id=image]').removeAttr('checked');
}
);
// just to test for the checkbox.
$('form#form1').submit(function(e){
e.preventDefault();
var form = $('form#form1').serialize();
alert(form);
});
});
</script>
fiddle NOTE:This uses common.js and paintbrush.js so it may not function properly. I couldn't figure out how to make it work on fiddle. NOTE2:The Plug in is PaintbrushJS.
Aucun commentaire:
Enregistrer un commentaire