Tuesday 12 June 2012

JQuery mouseover effect sample for website gallery


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Abivyakti-The fun Learning site</title>
<style type="text/css">
</style>
<link href="css/Tabs.css" rel="stylesheet" type="text/css" />
<h1 style="text-align:center;"><font size="10" face="Comic Sans MS, cursive" color="#CC0033"><blockquote><img src="Image/disney-graphics-baby-disney-961731.gif" align="middle" height="200px" width="200px" /><img src="Image/g.gif" align="middle" height="80px" width="80px" /><img src="Image/a.gif" align="middle" height="80px" width="80px" /><img src="Image/l.gif" align="middle" height="80px" width="80px" /><img src="Image/l.gif" align="middle" height="80px" width="80px" /><img src="Image/e.gif" align="middle" height="80px" width="80px" /><img src="Image/r.gif" align="middle" height="80px" width="80px" /><img src="Image/y.gif" align="middle" height="80px" width="80px" /></blockquote></font>
</h1>
<script src="script/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(document).ready(function(){
$('a img').animate({
opacity:.5
});
$('a img').hover(function(){
$(this).stop().animate({opacity:1},'fast');
$(id="hib").play(src="Audio/1.mp3");
},function(){
$(this).stop().animate({opacity:0.5},'slow');
$(id="hib").stop();
});
});
$(function(){
$('a.click').click(function(){
$('embed').remove();
$('body').append('<embed src="Audio/1.mp3" autostart="true" hidden="true" loop="false">');
});
$('hib').mouseover(function(){
$('embed').remove();
$('body').append('<embed src="hover.wav" autostart="true" hidden="true" loop="false">');
});
});
</script>
</head>
<body bgcolor="#CCCCCC" background="Image/bckkids.png">
<div id="navbar">
<div id="holder">
<ul>
<li><a href ="Abhivyakti_home.html" id="onlink">Home</a></li>
<li><a href="Garden.html">Garden</a></li>
<li><a href="Excercise.html">Excercise</a></li>
<li><a href="Contact.html">Contact</a></li>
<li><a href="Help.html">Help</a></li>
</ul>
<br />
<div id="Album">
<a href="#" class="click"><img src="Image/Hibiscus-1.jpg" height="250" width="250" /></a>
<a href="#" class="hover"><img src="Image/Lilac-2.jpg" height="250" width="250"/></a>
<a href="#"><img src="Image/Lotus-2.jpg" height="250" width="250" /></a>
<a href="#"><img src="Image/Orchid_1.jpg" height="250" width="250"/></a>
<a href="#"><img src="Image/Sunflower-1.jpg" height="250" width="250"/></a>
<a href="#"><img src="Image/Tulip-3.jpg" height="250" width="250" /></a>
<a href="#"><img src="Image/Peony-1.jpg" height="250" width="250" /></a>
<a href="#"><img src="Image/rose-3.jpg" height="250" width="250" /></a>
<a href="#"><img src="Image/pink_Carnation_flower_image.jpg" height="250" width="250" /></a>
<a href="#"><img src="Image/images.jpg" height="250" width="250" /></a>
<embed height="0px" width="0px" loop="infinite" src="Audio/.mp3" AUTOSTART=true />
</div>
<br>
</body>
</html>




No comments:

Post a Comment