Anand Anand - 4 months ago 57
HTML Question

Change image onclick and again change to previous image on clicking again - only using CSS and HTML

I have tried following code which is onclicking an image it changes to another image and again it should switch back to previous image on clicking again. In below code the image will only stay visible while you are holding down the mouse button. I want to have it stay visible until you click again.

<!DOCTYPE html>
<html>
<head><title>HTML5 form</title><link rel="SHORTCUT ICON" href="/e/ref.ico" />
<style type="text/css">
div.nav {
height: 340px;
width: 300px;
margin:0;
padding:0;
background-image:url("http://s24.postimg.org/6g070ei6d/logo.jpg");
}

div.nav a, div.nav a:link, div.nav a:visited {
display:block;
}

div.nav img {
border:0;
}

div.nav a:active img {
visibility:hidden;
.thumbnail:focus span
visibility: visible;
}
</style>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'></head>
<body>
<div class="nav">
<a href="#">
<img src="http://s10.postimg.org/bthpk39yh/logo_red.jpg" alt="" />
</a>
</div>
</body></html>

Answer

Try this:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .checkbox { display: none; }
        .label {
            display: inline-block;
            width: 100px;
            height: 100px;
            background: url(http://www.letsgomobile.org/images/reviews/0102/samsung-camera-phone-test-photos.jpg);
        }
        .checkbox:checked + .label {
            background: url(http://www.letsgomobile.org/images/reviews/0102/samsung-camera-phone-test-pictures.jpg);
        }
    </style>
</head>
<body>
    <input type="checkbox" class="checkbox" id="checked">
    <label class="label" for="checked"></label>
</body>
</html>