Question

I have several images on a page, all in list items. On hover of one of those images, I would like to get the title attribute and display it in a div. Here’s my code so far:

<ul>
    <li><img src="1.jpg" title="First Image"></li>
    <li><img src="2.jpg" title="A second Image"></li>
    <li><img src="3.jpg" title="And another one"></li>
</ul>

<div id="imagetitle">
<!-- Title Should go Here -->
</div>

I have a general idea that you could do this with the attr(); in jQuery, but I’m not sure how — can anyone help me?

Answer 1

Bind a hover event. Then, modify the contents of the #imagetitle div using .text(). You can retrieve the title through this.title or, if you wish, $(this).attr('title').

$('img').hover(function(){
    $('#imagetitle').text(this.title);
})