How to switch images on click in html and css

Question

I have 9 images in a single page and the layout is made to look like a grid of 9 images. I have an Image which I to want use as a border for each image when u click on the image. It's a transparent image with a border,like confirming the selection of image.

How can I achieve this?When I click on the image,border image should come and again when I click on the image the border image should disappear.

Is there any way to achieve it only using the 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>

[If you use checkboxes, it's possible to do it using only CSS](https://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css). Otherwise, you'll have to [use javascript to detect the click and toggle the relevant class](https://stackoverflow.com/questions/18880890/how-do-i-toggle-an-elements-class-in-pure-javascript). In your case, I'd probably recommend going the javascript route. — Christian, May 04 '15 at 05:42
[Jquery switching between several images on click](http://stackoverflow.com/questions/1115858/jquery-switching-between-several-images-on-click) might be useful. — Huey, May 04 '15 at 05:46
@ashkufaraz If you edit a post, please also correct the multitude of spelling and grammar errors that are in there, not just the (easy) code formatting issues. — Anthon, May 04 '15 at 06:18
@ChristianVarga,I used the checkbox,but it was able to do the function only for 1st image,If I add one more checkbox switching pupose only the first image gets changed when I click on the second image — Nikhil Bharadwaj, May 04 '15 at 06:26

score 5 · Accepted Answer · 2015-05-04T08:57:18.457

Try css pseudo code.

Multiple selection using checkbox

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 selection using radio

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, positioned & 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>

P.S. css property border-radius won't work for IE < 9

@Arvind.Thanks for the solution.I still have one more doubt,where can I provide the position and size of the imge in css?Can I use the class of image for specifying the image position? And also how to I provide rounded border? — Nikhil Bharadwaj, May 04 '15 at 07:01
,Thanks a lot.It works like a charm.I still have one problem,I have to place a text on the image.And Ive created a div and positioned the text on that image.The image I have used is kind of half transparent image.When I place the text on the image the color of the text fades away.if I use z-Index for the text part of the div,the border switching doesnt work.What can I do? — Nikhil Bharadwaj, May 04 '15 at 08:31
If you dont mind can u post a small example of the code for the text? — Nikhil Bharadwaj, May 04 '15 at 08:41
the text will be on the left corner of the image.The text will be on the image.The image is of hald transparent black image,so the white text comes below the image and the white color of the text turns into grey.I want it to remain white all the time. — Nikhil Bharadwaj, May 04 '15 at 08:51

How to switch images on click in html and css

1 Answers1