I have added CSS in to customize the images on my checkmark boxes, when clicked it's supposed to show the image with a checkmark in it. However upon testing it does not work.
I Used the CSS and the HTML from this stack overflow to implement the custom images for checkboxes multiple pairs. The Sprite has each icon stacked 50 px in heigh.
Not 100% certain where I went wrong to make it not work, what could be wrong with my code to not make the checkbox check and uncheck?
<html><head>
<style>
@font-face {
font-family: 'Scribble Box'; /*a name to be used later*/
src: url('/scribbleboxdemo.ttf'); /*URL to font*/
}
.scribblebox{
font-family: 'Scribble Box';
font-size: 50px;
}
.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;
float: left;
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
}
#station_C{
top: 8%; /* whatever you like */
left: 5%; /* whatever you like */
position: absolute;
}
.hover {
color: green
}
#wrapper {
width:4000px;
clear:both;
}
#first {
border: 3px solid black;
width:300px;
float:left;
}
#second {
border: 3px solid black;
width:300px;
float:left;
}
#third {
border: 3px solid black;
width:200px;
float:left;
}
input[type=checkbox]{ display:none; }
input[type=checkbox] + label{
background-image: url('/checkmarkboxes.png');
display: block;
height: 50px;
padding: 0;
width: 48px; }
#lightblue + #lightblue_s{ background-position: 0 50; }
#lightblue:checked + #lightblue_s{ background-position: 0 -50px; }
</style>
<div id="wrapper">
<div id="map">
<span id="station_A" class="overlay"><img src="/Bandana_top.png" /></span>
<span id="station_B" class="overlay">Highlight image here.</span>
<span id="station_C" class="overlay"><img src="Bandana_top.png" class="filter-tint" data-pb-tint-opacity="0.5" data-pb-tint-colour="#8fc0ff"></span>
</div>
<p>
<div id="first">
<h2>
Choose a Color
</h2>
<input type='checkbox' name='methods' value='valuable' id="lightblue"/><label id="lightblue_s" for="lightblue"></label>
</div>
<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');
});
});
</script>
Updated Fiddle.
Aucun commentaire:
Enregistrer un commentaire