I have groups of images that I'd like people to be able to select.
Image Group One:
There's four images, 3 are assigned the css class "select-off", one is assigned the css class "select-on". I have corresponding CSS written, but that's not relevant to what I'm trying to do right now. What I want is when someone clicks on one of the images, the css class is swapped. This will in turn swap the other classes for the other images as well. So only one image from the group can be selected at a time. This works exactly like the radio button of an html form.
Image Group Two:
there's four images, 3 are assigned the css class "select-off", one is assigned the css class "select-on", just as the group described above. The difference with this group, is that multiple images can be selected within the same group. Clicking the image will swap the class from the current class to the opposite. Clicking again will swap again. These work exactly like selecting/unselecting checkboxes in an html form.
Since all of the images in the different groups are different from each other, I need to be able to swap classes, not images. Also, I have many different instances of both Group One and Group Two on the same page.
Ive tried adjusting many different javascripts I've found around the Net, but with no luck. I know this is very simple, and I've come close to what I want on my own, but my js skills just arent very good. Does anyone know of a script available that I can use for this without modifications? Or does anyone perhaps already have a script they care to share? Thanks :)
A final quick note, selecting an image should NOT refresh the page. Links that require href="#" in the tag to operate properly wont help me, as that would conflict with the way I have the page already setup. I need the link tag that wraps the image to not contain href at all. The images are being selected, but not actually linking to anything.
Start Free Trial
