how to create 2 html button to change images

Question

I have 2 images, front and back of a robot.

I need html or CSS code (NO JAVA SCRIPT/JQUERY), so that when I click front, the front robot shows, and when I click back the back of the robot shows.

I found a tutorial the other day on google, and now I cant find it :S

Anyone got any ideas? I'm sure it must be simple. REMEMBER -NO JAVA SCRIPT PLEASE!

css and html were not written to be used how you want it to be used, this is why we have javascript. — Josh Stevens, May 27 '15 at 19:02
Only way I see this working with HTML/CSS only is to have one single button, and the robot's front/back showing in that same button's background image. Anything other than that seems a bit impossible. — lucasnadalutti, May 27 '15 at 19:04
unless you have any idea how wordpress will accept javascript into a post then it has to be simple html and css based — Lucy Webster, May 27 '15 at 19:05
Check this out http://stackoverflow.com/questions/8783984/html-button-change-image-source — giorgos, May 27 '15 at 20:30

Josh Stevens · Answer 1 · 2015-05-27T20:03:59.900

CSS was not meant to be used like this but here is a work around.. something i call a BODGE. This will be using the :checked pseudo class - attach it to a pseudo element of a checkbox then change its background accordingly.

I have even put robot pictures in there for you ;)

CSS:

input[type="checkbox"] {
    content: url('http://www.thelemming.com/lemming/POP-CULTURE/asimo-robot_48.jpg');
    display: block;
    width: 200px;
    height: 200px;
    border: 1px solid black;
}
input[type="checkbox"]:checked {
    content: url('http://www.sstscorp.in/images/QRIO.jpg.jpg');
}
.native-hidden {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

HTML:

<input class="native-hidden" type="checkbox" />

you can change the images in the css to your robot ones, input[type="checkbox"] will be your first image on page load and input[type="checkbox"]:checked will be the picture when its clicked.

http://jsfiddle.net/joshstevens19/goyenhLd/2/

+1. You can also use the sibling selector `~` and the checkbox's label. See here: https://css-tricks.com/the-checkbox-hack/ — sudo rm -rf slash, May 27 '15 at 19:45

how to create 2 html button to change images

1 Answers1