Changing pictures with javascript

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?

`$("label img").click(function(){$(this).attr("src", "myNewImage.png");})` — Patrick Gunderson, Dec 18 '12 at 21:23

Mattias Josefsson · Accepted Answer · 2012-12-18T22:24:53.990

0

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" />

edited Dec 18 '12 at 22:24

answered Dec 18 '12 at 21:27

Mattias Josefsson

1,147
1
7
22

Well, its a shove in the right direction i suppose however it still doesnt explain how to do it – Halter Dec 18 '12 at 21:31
well, it did work swtiching once, but as i need the user to be able to deselect it, how would i go about having it switch back? would i just have to write it again backwards :X sorry still learning here – Halter Dec 18 '12 at 21:47
Its not the most beautiful solution but it will get the job done, there is a nice jquery function that alternates beetween two images i cant remember it now but will update my answer when i find it. – Mattias Josefsson Dec 18 '12 at 21:56
hate to be the bearer of bad news, especially with how much your helping, but on this one on click nothing changes. any ideas why? – Halter Dec 18 '12 at 22:02
probobly becasuse i used == insteed of === to compare the strings – Mattias Josefsson Dec 18 '12 at 22:05
nope still nothing :/ is it working on your end – Halter Dec 18 '12 at 22:10
now it should work as you wanted it to :) – Mattias Josefsson Dec 18 '12 at 22:27
people like you make the internet a better place, it worked perfect :) sorry im pretty good at everything from bare bones html do scripting for db's except when it comes to js, if you know a good book i can sit bown and get started with i would love to hear it :) – Halter Dec 18 '12 at 22:31
Thanks :) Im no expert at javascript either but check out Crockfords videos at this site the are a good start http://yuiblog.com/crockford/ – Mattias Josefsson Dec 18 '12 at 22:35

Erik Eidt · Answer 2 · 2012-12-18T21:49:13.493

You don't necessarily need to use another image, you can differentiate the existing image.

Use a css class:

<head>
    <style>
        .selected {
            outline: solid 2px blue;
        }
    </style>
</head>
<body>
    <img class="selected" src="http://bugzilla.mozilla.org/extensions/BMO/web/images/mozchomp.gif" />
</body>

using javascript, change the className to "selected" to get a highlighting effect or to "" (nothing, empty) for unselecting.

(Or use inline css style attribute style="outline: solid 2px blue")

Changing pictures with javascript

2 Answers2