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>

​

Answer 1

$("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);
}