Hi. I am trying to edit my HTML code so that an image changes when clicked/touched (basically going from an unlabelled form to a labelled form. I have found a bit of code that seems to do the trick nicely (using checkbox), problem is that when I try to add a second set of images to the same page, it overrides the first set of instructions, leaving me with two copies of the same image swap rather than two different image swaps. Does anyone know what I need to put between the two sets of code to stop the second set from overriding the first? Here is the code for one image swap: <span> <center> <input type="checkbox"/> <style type="text/css"> input[type="checkbox"] { content: url("../../../_Media/animal-labelled_med.jpeg"); width : 685px; height : 428px; } input[type="checkbox"]:checked { content: url("../../../_Media/animal-unlabelled_med.jpeg"); width : 685px; height : 428px; </style></center> </span>

Your solution isn't a Buzztouch solution so much as it is an HTML Solution. If you're off looking for ways to do this, just check in HTML/CSS resources... "try" seeing if naming the object into groups can help… It might, it might not. But it's worth a shot… <span> <center> <input type="checkbox" name="test1group"/> <style type="text/css"> input[type="checkbox"] { content: url("../../../_Media/animal-labelled_med.jpeg"); width : 685px; height : 428px; } input[type="checkbox"]:checked { content: url("../../../_Media/animal-unlabelled_med.jpeg"); width : 685px; height : 428px; </style></center> </span> <span> <center> <input type="checkbox" name="test2group"/> <style type="text/css"> input[type="checkbox"] { content: url("../../../_Media/mineral-labelled_med.jpeg"); width : 685px; height : 428px; } input[type="checkbox"]:checked { content: url("../../../_Media/mineral-unlabelled_med.jpeg"); width : 685px; height : 428px; </style></center> </span> If that doesn't work, try adding 'name=xxxx' along with the other checkboxes… input[type="checkbox" name="test1group"]:checked { …. good luck! Cheers! -- Smug