CODEWITHSUNDEEP
phpjquerymouseover
Roel
Roel

Reputation: 1472

jQuery change image after hovering a dynamic link

So I generate a list of names that got an image linked in the database. I will put the names in an HTML list. Now I got 1 div that should contain the image linked to the name, so as soon as I hover an other link; the image should change.

These links are generated by PHP and can be either 1 or 100 links.

I got the following HTML code:

<ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
</ul>

<div id="divid_1"></div>

As soon I hover over link 1; I want the corresponding image to be shown, same for link 2 and so on.

Thanks.

Upvotes: 0

Views: 615

Answers (2)

Sylvain
Sylvain

Reputation: 3873

You should try :

$("ul li").mouseover(function() {
    $("#divid_1").find("img").attr("src",$(this).find("a").attr("href"));
});

You must add an <img> in your div#divid_1 for this to work.

See jsFiddle example here

Upvotes: 1

Nemoden
Nemoden

Reputation: 9056

<ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
</ul>

<div id="divid_1"><img id='img'></div>

JS:

$('ul > li > a').hover(function() { $('#img').src = $(this).attr('href'); })

I didn't try, but should work

Upvotes: 0

Related Questions