This question came via email earlier today:
Awesome article and very informative. I was trying to get it to work for what I am trying to accomplish but I am having a hell of a time getting it to work I was hoping you can help me.
I have a selection form based on Check Boxes:
item 1 (box)
item 2 (box)
item 3 (box)
item 4 (box)
I have images that correspond to the check boxes, item1.png, item2.png, item3.png, item4.png that are located elsewhere on the page. I just need the image to change based on whether the check box is checked or not. It doesn’t matter if it is faded or an entirely new image, so long as the user notices which box they checked. My problem is there are a lot of little images so in your example you had the two set variables, on or off. How do I introduce multiple images???
I have early tests and the problems are that the default unchecked images do not show up until after the check box is checked…all of them and two whenever I try to add multiple images and or check boxes it breaks somewhere, perhaps the array or I am approaching this at the wrong end. I need your help.
To rephrase the question:
- We have four checkboxes inside a form.
- On the same page, we have four images. Each image is related to one of those checkboxes. That is, Checkbox 1 is related to Photo 1, Checkbox 2 is related to Image 2, etc.
- When we click a checkbox, we want to change its associated image somehow, to indicate the checkbox’s state. (In this case, I am going to use a faded image if its related checkbox is unchecked, and a full-opacity image if its related checkbox is checked).
Easily enough accomplished.
For this exercise, I will use four pictures of Miss USA 2012 contestants, and ask users to pick which are their favorites. If a contestant is selected, her picture will be at full opacity; if the contestant is not selected, her image will be at reduced opacity (i.e., faded).