ตัวอย่าง
Javascript Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script><script type="text/javascript"> $(function(){ $("ul#eyefish li a img").hover(function(){ /* เงื่อนไขเมื่อเอาเมาส์เคลื่อนอยู่เหนือรูปภาพ*/ $(this).animate({ width:120, height:100 },300); },function(){ /* เงื่อนไขเมื่อเอาเมาส์เคลื่อนอยู่ออกจากรูปภาพ*/ $(this).animate({ /* กำหนดการเคลื่อนไหวด้วยการลดขนาดความกว้างและความสูงของรูป ใช้เวลาหน่วง 0.300 วินาที*/ width:85, height:71 },300); });});</script> |
CSS Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <style type="text/css"> img{/* กำหนดขอบให้กับ รูปภาพ*/ border:0;}ul#eyefish{ /* กำหนดขอบเขตของเมนู */ margin:0;padding:0; margin-left:100px; display:block; height:100px;}ul#eyefish li{ /* กำหนด css ให้กับ list รายการเมนู*/ list-style:none outside; float:left;}ul#eyefish li a img{ /* กำหนดขนาดเริ่มต้นให้กับรูปภาพ */ width:85px; height:71px;}</style> |
Html Code
1 2 3 4 5 6 7 8 9 | <ul id="eyefish"><li><a href="#"><img src="images/calendar.png" /></a></li><li><a href="#"><img src="images/email.png" /></a></li><li><a href="#"><img src="images/history.png" /></a></li><li><a href="#"><img src="images/home.png" /></a></li><li><a href="#"><img src="images/music.png" /></a></li><li><a href="#"><img src="images/portfolio.png" /></a></li><li><a href="#"><img src="images/video.png" /></a></li></ul> |
