How do i change the page background when i hover to every image link on the page. I would like to dynamically change the page background according to every image on the page. Please have a look at the code to get exact idea what i am trying to say.
<script>
$(function() {
$("a").hover(function() {
var $link = $("img").attr("src");
$("body").css("background", "url(" + $link + ")" );
});
});
</script>
<html>
<body>
<a href="#" title="">
<img src="portfolio_files/NEWSALV.gif" alt="">
</a>
<a href="#" title="">
<img src="portfolio_files/TSThumb.gif" alt="">
</a>
<a href="#" title="">
<img src="portfolio_files/MoreheadThumb.gif" alt="">
</a>
</body>
</html>
Please help on this, thanks in advance.
Using
$("img")will return the firstimgelement in your document each time. You need to find theimgelement relative to theaelement each time.This can be achieved by using
$(this)and.find();