CODEWITHSUNDEEP
javascriptjqueryhtml
AVEbrahimi
AVEbrahimi

Reputation: 19154

jQuery script for image change, not working

I want to change src of in img, I coded as below, but it's not working, what's wrong?

<img id='logo_image'/>
<span onclick='$(logo_image).attr("src", "images/logo_orange.png");'>click me</span>

Upvotes: 0

Views: 104

Answers (7)

Russ
Russ

Reputation: 549

As you have specified the image as an id, you will need to reference the image via the following code:

$('#logo_image')

Upvotes: 0

Jelke van der Sande
Jelke van der Sande

Reputation: 31

Make sure u use the right quotes in the javascript part. Also use $('#logo_image') selector to get the image by id. I made a jsfiddle for you to demonstrate:

http://jsfiddle.net/9Ltfa/

<span onclick="$('#logo_image').attr('src', 'images/logo_orange.png');">click me</span>

Upvotes: 0

nnnnnn
nnnnnn

Reputation: 150020

First up you're trying to use a variable logo_image when you should be using a string starting with # to indicate you want to select by id:

onclick='$("#logo_image").attr("src", "images/logo_orange.png");'

Secondly, it would be better not to use an inline onclick attribute if you can help it:

<img id='logo_image'/>
<span>click me</span>

<script>
$("span").click(function() {
   $("#logo_image").attr("src", "images/logo_orange.png");
});
</script>

...where ideally the span element would have some id or something to select it by.

Thirdly, don't make span elements clickable in the first place unless you don't care about making your page accessible to people who can't (or who choose not to) use a mouse or other pointing device. Better to use an anchor (which you can style as you see fit) so that the user can tab to it and activate it with the keyboard:

<img id='logo_image'/>
<a href="#">click me</a>

<script>
$("a").click(function(e) {
   e.preventDefault();
   $("#logo_image").attr("src", "images/logo_orange.png");
});
</script>

Upvotes: 2

Martin
Martin

Reputation: 3286

You have to use something like this:

<img id="logo_image" src="" />
<span onclick='$("#logo_image").attr("src", "images/logo_orange.png");'>
    click me
</span>

if you have an img with a id named logo_image if your img has the css class logo_image you have to write:

<img class="logo_image" src="" />
<span onclick='$(".logo_image").attr("src", "images/logo_orange.png");'>
    click me
</span>

Upvotes: 0

jotaen
jotaen

Reputation: 7029

Since you want refer to the name of the id, you have to wrap the logo_image in quotes, otherwise Javascript will treat it as variable.

$('#logo_image')

Upvotes: 0

Aashray
Aashray

Reputation: 2763

The problem with your code is you aren't probably setting the object to logo_image variable.

I suggest changing it to:

<span onclick='$("#logo_image").attr("src", "images/logo_orange.png");'>click me</span>

logo-_image should be the id of that image.

Upvotes: 0

PSR
PSR

Reputation: 40318

It might be the problem with your selector.

If it is id use $('#logo_image')

If it is class use $('.logo_image')

Upvotes: 4

Related Questions