changing img src inside a a href using javascript

Question

I have the following html:

<li>
   <a href=\"p://emotion/appreciate\" onclick=\"flip()\">
        <img src=\"smile.png\" />
   </a>
</li>

Basically, I want the flip function to replace the src of the img enclosed in it to smile-inactive when pressed, and change it back again to smile.png if it's now already in smile-inactive.png. How can I do this without having to do document.getElementById if I don't want to give the img an id?

This is a task that a framework like jQuery can really help with. Will save you a lot of time and head ache with browser compatibility. — Paul
– Paul, Commented Feb 16, 2012 at 22:26

Adam Rackis · Accepted Answer · 2012-02-16 22:41:02Z

2

Inside your flip function, I would make sure that this points to the anchor you just clicked, then grab the img as the first childNode:

<a href=\"p://emotion/appreciate\" onclick=\"flip.call(this)\">

function flip(){
    var img = this.children[0];
    if (/smile\.png/.test(img.src))
        img.src = "smile-inactive.png";
    else
        img.src = "smile.png"
}

EDIT

As @am not i am points out, you can achieve a slight gain in browser support by switching

var img = this.children[0];

to

var img = this.getElementsByTagName("img")[0];

edited Feb 16, 2012 at 22:41

answered Feb 16, 2012 at 22:27

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user1106925 Over a year ago

Ah, you fixed both corrections I was going to suggest. +1 but to be just a wee bit more correct, I'd escape the . in the regex. Should't make an actual difference though.

Adam Rackis Over a year ago

@amnotiam - indeed - escaped. Yeah, I forgot childNodes gives you text nodes too, while children only gives you the "good stuff" :) -- I'm not the dom ninja you are!

user1106925 Over a year ago

I'm not a DOM ninja... I just play one on StackOverflow. That said, you could pick up a little more browser support with getElementsByTagName instead of children, but really you're only gaining FF3, so who cares.

user1106925 Over a year ago

...love that you use .call() BTW.

Adam Rackis Over a year ago

@amnotiam - yeah, we've had that conversation - passing this as a param is soooooo cheesy. BTW - congrats on the rep - looks like we'll be welcoming you into the 10K club here pretty soon

Eran Egozi · Accepted Answer · 2012-02-16 22:28:32Z

0

Take both images, merge them to one, and just use offset to determine which one is shown.
You can do it by simply by CSS.

answered Feb 16, 2012 at 22:28

Eran Egozi

7731 gold badge7 silver badges18 bronze badges

3 Comments

user1106925 Over a year ago

CSS won't help with click events though. If we were talking about a :hover, I'd totally agree.

Eran Egozi Over a year ago

I know what you mean, and I agree as well, Just wanted to prevent to load of two different images.

user1106925 Over a year ago

Yeah, it's still a good idea. Would just need a little JS to swap a class.

Collectives™ on Stack Overflow

changing img src inside a a href using javascript

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related