Хранение img src в переменной javascript

Question

Когда я нажимаю на изображение, я хочу сохранить это изображение src в переменной Javascript. Как я могу это сделать? Имейте в виду, что тег <a> предназначен для эффекта зависания. Поэтому, когда я нажимаю на <a>, я хочу источник изображения своего брата.

Демо: 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> 

Answer 1

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

demo

...

UPDATE

JS только - 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); 
} 

Answer 2

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

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

Answer 3

Используйте событие делегат для click на document, для повышения эффективности, и получить parentNode для <a>. Затем возьмите <img> и получите src. С parentNode вы можете смело добавить свой дизайн без изменения кода.

Демо: 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);​ 

Answer 4

Вот такой подход, который будет печатать img.src с помощью rel="img-id" связать a к 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/