| <!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>
| |
Tuesday, 12 June 2012
JQuery mouseover effect sample for website gallery
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment