Storing img src in a javascript variable

Question

When I click on an image, I want to store that particular images src in a Javascript variable. How can I do this? Keep in mind the <a> tag is there for the hover effect. So when I click on the <a> I want the image source of its sibling.

Demo: http://jsfiddle.net/FVrTg/2

<div>
    <img src = "http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/YellowLabradorLooking_new.jpg/260px-YellowLabradorLooking_new.jpg"/>
    <a href = "#"></a>
</div>

<div>
    <img src = "http://whatiscat.com/wp-content/uploads/2011/07/cute_cat_2.whatiscat.com_.jpg"/>
    <a href = "#"></a>
</div>

Do you mean the source as in the image's data, or just the img src attribute value? Like $a.siblings('img').prop('src')? — Jared Farrish
– Jared Farrish, Commented Jul 1, 2012 at 23:51
Do you mean you want to store the image's url in a js variable, or the actual binary data for the image in a js variable? — Jonathan M
– Jonathan M, Commented Jul 1, 2012 at 23:52
Blasphemy! There is no Javascript, long live jQuery! (Of course I'm kidding, I somehow made the leap automatically and the answers you got are probably my fault. Sorry. Also note, it is more complicated with pure Javascript DOM walking.) — Jared Farrish
– Jared Farrish, Commented Jul 2, 2012 at 0:00
Unless, of course, you store an id for the img you're referencing in a rel or data-img-id attribute on the a, which would greatly simplify the answer. — Jared Farrish
– Jared Farrish, Commented Jul 2, 2012 at 0:02

Zoltan Toth · Accepted Answer · 2012-07-02 00:13:10Z

2

$("a").on("click", function() {
    alert ( $(this).siblings("img").attr("src") );
});

demo

...

UPDATE

JS only - http://jsfiddle.net/FVrTg/7/

var links = document.getElementsByTagName("a");
var size  = links.length;

for ( var i = 0; i < size; i++ ) {
    links[i].addEventListener("click", function() {
        alert( this.previousSibling.previousSibling.getAttribute("src") );
    }, false);
}

edited Jul 2, 2012 at 0:13

answered Jul 1, 2012 at 23:53

Zoltan Toth

47.8k12 gold badges132 silver badges138 bronze badges

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

1 Comment

user1481563 Over a year ago

Nice! Got a pure javascript way of doing it?

Ram · Accepted Answer · 2012-07-01 23:57:16Z

0

$('a').click(function(e){
   e.preventDefault();
   var src = $(this).siblings('img').prop('src');
})

http://jsfiddle.net/FVrTg/5/

edited Jul 1, 2012 at 23:57

answered Jul 1, 2012 at 23:52

Ram

145k16 gold badges174 silver badges201 bronze badges

2 Comments

user1481563 Over a year ago

Thanks. Do you know how to do this without using jquery?

Faizan Over a year ago

How can I store the path of the image in JS variable for which the user has selected by clicking the browse button ?

Jared Farrish · Accepted Answer · 2012-07-02 00:15:30Z

Here's an approach that will print the img.src out using rel="img-id" to relate the a to the img:

HTML

<div>
    <img id="img-1" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/YellowLabradorLooking_new.jpg/260px-YellowLabradorLooking_new.jpg"/>
    <a href="#" class="img-hover" rel="img-1"></a>
</div>

Javascript

window.onload = function(){
    var links = document.getElementsByTagName('a'),
        c_links = links.length,
        link;

    while (c_links--){
        link = links[c_links];

        if (link.className.indexOf('img-hover') > -1) {
            link.onclick = function(){
                var img = document.getElementById(this.rel);

                if (img) {
                    console.log(img.src);
                }
            };
        }
    }
};

http://jsfiddle.net/userdude/ecXCX/

ThinkingStiff · Accepted Answer · 2012-07-02 00:18:01Z

0

Use a delegate event for click on document, for efficiency, and get the parentNode for <a>. Then grab the <img> and get the src. With parentNode you can safely add to your design without altering the code.

Demo: http://jsfiddle.net/ThinkingStiff/NWD7f/

document.addEventListener( 'click', function( event ) {

    var a = event.target;

    if( a.tagName.toLowerCase() == 'a' ) {

        var src = a.parentNode.getElementsByTagName( 'img' )[0].src;
        console.log( src );

    };

}, false );

edited Jul 2, 2012 at 0:18

answered Jul 2, 2012 at 0:10

ThinkingStiff

65.4k31 gold badges148 silver badges241 bronze badges

9 Comments

Jared Farrish Over a year ago

For every click on the page? I guess it's an approach. IMO, document.getElementsByTagName is a "cleaner" approach, and I still felt a little naughty suggesting that.

ThinkingStiff Over a year ago

@JaredFarrish Delegates are more efficient than an event on each image. It's how libraries, like jQuery, recommend handling events (and are pushing it with the .on() function).

Jared Farrish Over a year ago

Yes, but it doesn't have to be on the document, does it? (EDIT: Although, I can see what you're saying in the delegate sense. It just feels icky, I'll probably get over that I suppose.)

ThinkingStiff Over a year ago

@JaredFarrish Yeah, that's just for easy demo purposes. I'd put an element around all the images. I was trying to leave his HTML as-is.

Jared Farrish Over a year ago

My whole answer revolves around manipulating the markup, using a rel (or a custom attribute as I mentioned that in a comment under the question) to link the a to it's corresponding img. Event attachment is better than my example's use of el.onclick. Old habits are hard to give up, but I think the rel gives the designer more latitude than DOM traversing, although both are useful at different times.

|

Collectives™ on Stack Overflow

Storing img src in a javascript variable

4 Answers 4

1 Comment

2 Comments

Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related