Geek Answers Handbook

How to switch images when clicked in html and css

I have 9 images on one page, and the layout is made to look like a grid of 9 images. I have an image that I want to use as a frame for each image when you click on the image. This is a transparent image with a frame, for example, confirmation of the choice of image.

How can i do this? When I click on the image, the border image should appear again; when I click on the image, the frame image should disappear.

Is there a way to achieve this only with HTML and CSS

.image1 { left: 786 px; top: 629 px; position: absolute; width: 441 px; height: 243 px; float: left; } .image2 { left: 1284 px; top: 629 px; position: absolute; width: 441 px; height: 243 px; float: left; } .image3 { left: 289 px; top: 920 px; position: absolute; width: 441 px; height: 243 px; float: left; } <html> <body> <div class="image1"> <img src="images/image1.png" /> </div> <div class="image2"> <img src="images/image2.png" /> </div> <div class="image3"> <img src="images/image3.png" /> </div> </body> </html>
+5
source share
1 answer

Try css pseudo code.

Multiple checkbox selection

 input.switch-border { display: none; } input.switch-border + label > img { border: 2px solid transparent; cursor: pointer; } input.switch-border:checked + label > img { border-color: grey; } 
 <input type='checkbox' class='switch-border' id='r1' /> <label for='r1'> <img src='http://pix.iemoji.com/sbemojix2/0669.png' class='switch-border' /> </label> <input type='checkbox' class='switch-border' id='r2' /> <label for='r2'> <img src='http://pix.iemoji.com/sbemojix2/0669.png' class='switch-border' /> </label>

Single radio selection

 input.switch-border { display: none; } input.switch-border + label > img { border: 2px solid transparent; cursor: pointer; } input.switch-border:checked + label > img { border-color: grey; } 
 <input type='radio' class='switch-border' id='r1' name='switch' /> <label for='r1'> <img src='http://pix.iemoji.com/sbemojix2/0669.png' class='switch-border' /> </label> <input type='radio' class='switch-border' id='r2' name='switch' /> <label for='r2'> <img src='http://pix.iemoji.com/sbemojix2/0669.png' class='switch-border' /> </label>

Edit

Rounded corner, size, layout and text.

 input.switch-border { display: none; } input.switch-border + label { border: 2px solid transparent; border-radius: 10px; /* rounded corners */ -moz-border-radius: 10px; /* FF */ -webkit-border-radius: 10px; /* chrome */ cursor: pointer; padding: 5px 7px; } input.switch-border + label > img { width: 100px; /* size */ height: 100px; /* size */ } input.switch-border:checked + label { border-color: grey; } label[for=r2] { float: right; } label[for=r1] { float: left; } 
 <input type='radio' class='switch-border' id='r1' name='switch' /> <label for='r1'> <span>Image Desc</span> <img src='http://pix.iemoji.com/sbemojix2/0669.png' class='switch-border' /> </label> <input type='radio' class='switch-border' id='r2' name='switch' /> <label for='r2'> <span>Image Desc</span> <img src='http://pix.iemoji.com/sbemojix2/0669.png' class='switch-border' /> </label>

PS The css border-radius property will not work for IE <9

+5
source

More articles:


All Articles