Question

Possible Duplicate:
changing the img src with jquery

The title may make this sound easy, and it probably is. but i, with my incredibly small knowledge of js, am finding it incredibly nerve wracking… basically i have pictures set in a form (lets say img1 img2 and img3) and i want the user to be able to click on an image and it will change to a different one, for instance you click on img1 and it becomes img1a. and etc, heres the code:

<form>
<p align="center">
<input type="checkbox" name="interest1" id="interest1" value="x">
<input type="checkbox" name="interest2" id="interest2" value="x">
<input type="checkbox" name="interest3" id="interest3" value="x"></p>   
<p align="center">
<label for="interest1" id="label-interest1"><img src="/images/img1.jpg" width="781" height="800" /></label>
<label for="interest2" id="label-interest2"><img src="/images/img2.jpg" width="781" height="800" /></label>
<label for="interest3" id="label-interest3"><img src="/images/img3.jpg" width="781" height="800" /></label></P><!-- code making checkbox be an image-->
</form>

there are currently checkboxes, however those will be hidden, so i need the images to change on click to show the user that it is in fact selected, any ideas guys?

Answer 1

In the image tag add an onclick event and add the javascript there to change the image source.

<script type="text/javascript">
function func()
{
    var img1= document.getElementById("img1");

    if(img1.name == "on")
    {
        img1.src = "/images/" + "img1a.jpg";
        img1.name = "off";
    }
    else
    {
        img1.src = "/images/" + "img1.jpg";
        img1.name = "on";
    }
}
</script>

<img src="/images/img1.jpg" width="781" height="800" onclick="func()" id="img1" name="on" />