When the mouse cursor moves over an image, I would like to display an alert() containing the value of that image's src attribute. How could I go about accomplishing this?
Add a comment
|
4 Answers
You can use the mouseover event.
If you have
<img src='foo.jpg' id='bar'>
You can have some jQuery code like
$('#bar').mouseover(function(){ alert($(this).attr('src')); });
(if this fails you could also try replacing $(this) with $('#bar'), but as noted in the comments it's pretty ugly)
edit: missed the need to display the src attribute first time through..
4 Comments
Mark Elliot
@chalist, sorry -- give it another go
Jacob Relkin
Why not just use
this inside the handler instead of the actual '#bar' selector?Jacob Relkin
like,
$('#bar').mouseover(function(){ alert($( this ).attr('src')); });? Man, @Pekka is right, this is UGLY!Mark Elliot
@Jacob, started that way, OP was getting undefined, this will for sure return the correct result. rolled it back for good measure.
JavaScript:
function alertSource( image ) {
alert( image.src );
}
HTML:
<img src="path/to/image" onmouseover="alertSource(this);" alt=""/>
You do not need jQuery for this.
5 Comments
Mark Elliot
you do mean onmouseover instead of onclick, no?
Jacob Relkin
I've noticed that we usually answer the same types of questions, it's only a matter of who answers first. :)
Jacob Relkin
How about upvoting because i had VALID html?? ( the
alt attribute ) :)Mark Elliot
+1 for doing it without jQuery (despite the OP asking for it), and for having valid HTML... =)
Pekka
+1 for doing it without Jquery (which just uglifies the job horrendously. Just look at that code!) :)
<img src="some_img.gif">
<script>
$("img").bind("mouseover",function(){
alert($(this).attr("src"));
});
</script>
1 Comment
Jacob Relkin
Why use
bind when you have the mouseover shortcut function?$('img').mouseover(function() {
alert( this.src );
});
