App5: Change background image with mouseover effect

<!–

Whenever you took the cursor upon an image the image will be apply as the background image of the body. I have use 5 images with mouseover effect and those put into image folder.So if you don’t put your images on the image folder it will not found the currect path of the images, be carefull.

–>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>

$(document).ready(function(){

$(‘div img’).mouseover(function(){

var img_source = $(this).attr(‘src’);
var height = $(window).height();
var width = $(window).width();

$(this).css({‘opacity’:1});
$(‘body’).css({‘background-image’:’url(‘+img_source+’)’});

}).mouseout(function(){

$(this).css({‘opacity’:0.4});
});

});

</script>
<style type=”text/css”>
#main_div
{
height:auto;
width:150px;
border:2px #0C3;
}
img
{
opacity:0.4;
border:2px inset #999;
height:100px;
width:120px;
padding:2px;
}
</style>
</head>

<body>
<div id=”main_div”>
<img src=”image/1.jpg” alt=”image 1″/>
<img src=”image/2.jpg” alt=”image 2″/>
<img src=”image/3.jpg” alt=”image 3″/>
<img src=”image/4.jpg” alt=”image 4″/>
<img src=”image/5.jpg” alt=”image 5″/>

</div>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s