How to switch images on click in html and css


Tags: html,css

Problem :

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>


Solution :

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


    CSS Howto..

    How do I vertically center an image whose size can change in a div?

    How do I get jQuery to change classes according to an If/Then statement. My 'home' link will not change class when another link clicked on

    CSS menu list items need to show inside div container

    How to assign CSS to mobile page in asp.net

    draggable without jquery ui: how to stop dragging the not-draggable and type-able elements?

    How to include CSS in laravel 5 running with artisan?

    How to change custom icon image on hover of the link next to it?

    How to fill columns with images

    how to customize css ellipse for a text string [duplicate]

    How to replace non-existing images with a default one in css?

    Why the jaggedness at the end? How to fix the CSS style

    How do I get the ID of a JQuery item mid-function?

    CSS styles “leaking” to non-intended elements, why does it happen and how to prevent it?

    How to create a table with fixed layout?

    How do I use CSS to create rounded corners in IE 8? [duplicate]

    How to do a “true” carbon fiber CSS background

    Using css modules, how can I use composes to include a list of variables for colors

    How to get angled corner like this in CSS, it's not round?

    How do I get my link background to go beneath it during hover?

    How to use a variable for image paths with less mixins

    How to remove last TD in first LINE

    if i clone an element, when i customize (css) that element how can customize also the element cloned?

    several questions about how to work with divs

    How to create a medal in css [closed]

    How to reset a jquery function on-the-fly

    How I do edit the css for just the home page on Magento?

    how to get a rounded corner table with a body in different color with CSS?

    How to apply css inside a text that is either any html control or without any html control

    How do I get the height of a textarea

    How to get the style value using attr