How are your coding chops?
I made this little page as an example of what you can do to get a toggle (basically what you're talking about) into your page without using a javascript library or framework. It's a simple HTML/CSS toggle that targets the state of a few hidden checkboxes, controlled by their respective <label> tags, that will work on tap or click across every platform I've tested (no idea about smart fridges).
Copy and paste into a new document.
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Checkbox On-Tap Image Swap (no javascript)</title>
<style>
/* hides the checkboxes that we're using for CSS toggles*/
input[type=checkbox]{
display:none;
}
/**/
label {
display:block;
}
/*styles image boxes */
.tapbox {
display: block;
width:144px;
height:144px;
border:1px solid black;
cursor:pointer;
}
/* this controls the before and after states of the first image */
.one {
background-image:url("http://via.placeholder.com/150");
background-size:cover;
}
#image1:checked ~ label[for="image1"] > a {
background-image:url("http://via.placeholder.com/250");
background-size:cover;
}
/* end image one */
/* this controls the before and after states of the second image */
.two {
background-image:url("http://via.placeholder.com/350");
background-size:cover;
}
#image2:checked ~ label[for="image2"] > a {
background-image:url("http://via.placeholder.com/450");
background-size:cover;
}
/* end image two */
</style>
</head>
<body>
<!-- These checkboxes should stay at the top of your html, don't worry, they're hidden with CSS -->
<input type="checkbox" name="image1" id="image1">
<input type="checkbox" name="image2" id="image2">
<!-- this is the html for the first image, along with the first checkbox above -->
<label for="image1">
<a class="tapbox one">
</a>
</label>
<!-- end first image html -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero quod est, voluptatibus quam sit dignissimos! Aliquam explicabo sint rem, quis ut fuga magni minima, corporis fugiat quasi odio autem, in sapiente tempore similique ratione temporibus vero commodi.
</p>
<!-- this is the html of the second image, along with the checkbox up top -->
<label for="image2">
<a class="tapbox two">
</a>
</label>
<!-- end second image html -->
</body>
</html>
11
Replies
AdChoices