Hiệu ứng hover với CSS

Ngày 29/05/2007Chủ dề Công nghệDel.icio.us

css_icon_2_logo.jpgTrong bài này tôi sẽ giới thiệu cách thực hiện ứng hover bằng các phương pháp mà tôi đã sử dụng qua các giai đoạn theo sự phát triển của kỹ thuật: bắt đầu bằng javascript rồi chuyển sang dùng CSS

JAVASCRIPT
Cách đây khoảng vài năm thì khi nhắc đến các hiệu ứng trên web, có lẽ người ta sẽ nghĩ ngay đến javascript.Hiệu ứng hover thực hiện bằng javascript về cơ bản chúng ta sử dụng hai image và thực hiện swap image

Hai image sử dụng cho hiệu ứng hover:home.gif và home_hover.gif

homehome_hover
File hover.js

PLAIN TEXT
JavaScript:
  1. function MM_preloadImages() { //v3.0
  2.   var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  3.     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  4.     if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  5. }
  6.  
  7. function MM_swapImgRestore() { //v3.0
  8.   var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
  9. }
  10.  
  11. function MM_findObj(n, d) { //v4.01
  12.   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  13.     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  14.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  15.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  16.   if(!x && d.getElementById) x=d.getElementById(n); return x;
  17. }
  18.  
  19. function MM_swapImage() { //v3.0
  20.   var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  21.    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
  22. }

File hover_js_2.htm

PLAIN TEXT
HTML:
  3. <script  type="text/javascript" src="hover.js"></script>
  4. </head>
  5.  
  7. <img name="Image1" src="home.jpg" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','home_hover.gif',1)">
  8. </body>
  9. </html>

Kết quả:

Hạn chế của javascript
Tuy nhiên, do một số trình duyệt như IE mặc định sẽ block các đoạn code javascript, do đó trong nhiều trướng hợp khi truy cập vào một số website sử dụng javascript bạn sẽ nhận được thông bào như sau:

ie
Để khắc phục hạn chế này, các hiệu ứng về sau đều sử dụng css

CASCADE STYLE SHEET
Khi mới chuyển sang sử dụng css để thực hiện hiệu ứng, tôi vẫn dùng 2 images riêng biệt cùng với thuộc tính hover của CSS

File style.css

PLAIN TEXT
CSS:
  1. .hnav_img {
  2.     height:38px;
  3.     width:104px;
  4.     display:inline;
  5. }
  6. #hnav_menu {
  7.     padding:0px;
  8.     margin:0px;
  9. }
  10.  
  11. ul#hnav_menu li span {
  12.     position:relative;
  13.     left:-9999em;
  14.    
  15. }
  16. ul#hnav_menu li a{
  17.     height:38px;
  18.     width:104px;
  19.     float:left;
  20.     position:relative;
  21. }
  22. #hnav_trangchu {
  23.     background-image:url(home.gif);
  24. }
  25. #hnav_trangchu:hover {
  26.     background-image:url(home_hover.gif);
  27. }

File hover_css.htm

PLAIN TEXT
HTML:
  3. <link rel="stylesheet" type="text/css" href="style.css">
  4. </head>
  5.  
  7.     <ul id="hnav_menu">
  8.         <li class="hnav_img"><a id="hnav_trangchu" title="Trang ch? i4c" href=""><span>Trang chu</span></a></li>
  9.         <li class="hnav_img"><a id="hnav_trangchu" title="Trang ch? i4c" href=""><span>Trang chu</span></a></li>
  10.     </ul>
  11. </body>
  12. </html>

Kết quả

Hạn chế của việc sử dụng css với 2 images riêng biệt:
Khi trang web vừa load thì chỉ có home.gif là được load lên, đến khi bạn rê chuột lên home.gif thì css mới thực hiện hiệu ứng hover và lúc đó mới load home_hover.gif. Vì thế khi lần đầu rê chuột vào home.gif bạn sẽ có cảm giác hình ảnh nhấp nháy một lúc rồi mới chuyển sang home_hover.gif. Để khắc phục điểm này, chúng ta sử dụng css với một image duy nhất
*** Theo tôi biết thì Yobanbe.com vẫn đang sử dụng hover effect với 2 image riêng biệt

Để thực hiện hover effect với 1 image thì chúng ta sẽ sử dụng thêm thuộc tính background-position.

Thuộc tình background-position có cú pháp như sau:
- background-position: x% y%
- background-position: xpos ypox
Trong đó x,y lần lượt là vị trí ngang và dọc của image được sử dụng

Image sử dụng
menu
File style2.css

PLAIN TEXT
CSS:
  1. .hnav_img {
  2.     height:38px;
  3.     width:109px;
  4.     display:inline;
  5. }
  6. #hnav_menu {
  7.     padding:0px;
  8.     margin:0px;
  9. }
  10.  
  11. ul#hnav_menu li span {
  12.     position:relative;
  13.     left:-9999em;
  14.    
  15. }
  16. ul#hnav_menu li a{
  17.     height:38px;
  18.     width:104px;
  19.     float:left;
  20.     position:relative;
  21. }
  22. #hnav_trangchu {
  23.     background-image:url(menu.jpg);
  24.     background-position:0% -38px;
  25. }
  26. #hnav_trangchu:hover {
  27.     background-image:url(menu.jpg);
  28.     background-position:0% -0px;
  29. }

File hover_css2.htm

PLAIN TEXT
HTML:
  3. <link rel="stylesheet" type="text/css" href="style2.css">
  4. </head>
  5.  
  7.     <ul id="hnav_menu">
  8.         <li class="hnav_img"><a id="hnav_trangchu" title="Trang ch? i4c" href=""><span>Trang chu</span></a></li>
  9.         <li class="hnav_img"><a id="hnav_trangchu" title="Trang ch? i4c" href=""><span>Trang chu</span></a></li>
  10.     </ul>
  11. </body>
  12. </html>

Kết quả

Trên đây là cách thưc hiện hiệu ứng hover với css một cách rất đơn giản mà tôi đã tìm tòi và vẫn đang sử dụng, muồn tìm hiểu thêm về CSS, các bạn có thể truy cập các website chuyền về deisgn như:

- CSS beauty
- W3 schools
- AlistApart

Download các ví dụ sử dụng trong bài : hover_examples.zip

NDLoc,28.5.2007

Đã có 8 phản hồi về bài viết

  • Tuesday 29/05/2007 6:14 pm
    likethitnguoi

    Ý tưởng sử dụng 1 imgage hay lắm, thanks bạn nhiều nhé :)
  • Tuesday 21/08/2007 4:25 pm
    Spirit

    1 Image thì cũng có bất tiện là cái hover sẽ ko thể custom 100% dc, 1 website ko dùng bất kì js nào thì mình “hiếm” thấy ^^ cho nên mình nghĩ nên kết hợp cả 2. Ko dùng hover = js nhưng giữ lại cái js preload và dùng hover trong CSS.

    Hạn chế sử dụng js sẽ giúp page load nhanh hơn nhưng nếu nói ko dùng js thì còn gì là web nữa đúng ko? (Đặc biệt là trong thời kì nhà nhà ajax, người người ajax này?)
  • Friday 14/09/2007 6:12 am
    rilwis

    Cách dùng 1 ảnh để hiển thị rất tốt, vì nó ngoài ưu điểm không gây cảm giác chuyển đổi cho người đọc, còn có tác dụng làm hạn chế số lượng request đến server giúp cho web chạy nhanh hơn.

    Cách dùng CSS tốt hơn JS vì nó dễ dàng chuyển đổi, code lại đơn giản, so với các đoạn mã JS thì nó dễ hiểu hơn nhiều.
  • Wednesday 05/12/2007 12:11 pm
    dang phuong

    cach cua ban lam rat tot ban con bai nao hay hay chia se cung moi nguoi nhe
  • Sunday 09/12/2007 8:50 am
    Tuấn - CSS questions

    Nếu ko dùng 1 hình thì có thể dùng preload cũng được. Dùng 1 hình thì nên đặt cách xa nhau tránh trường hợp co giãn text sẽ làm bể layout.
  • Tuesday 04/03/2008 1:31 am
    Hiệu ứng hover với CSS | VT2 Blog

    […] PLAIN TEXT […]
  • Wednesday 07/05/2008 12:30 am
    Icttrack

    cách dùng rollover bằng js giống hệt đoạn mã do dreamweaver tạo ra. Sao bạn không tự viết một đoạn mã js với chức năng tương tự, nó cũng không quá khó.
  • Sunday 06/07/2008 12:07 am
    CH

    Bạn share cho mình mấy cái css làm mất hàng gạch dưới đoạn link liên kết cho mình đc chứ! Thanks so much. Gửi qua mail cho mình nhé.

Gửi phản hồi

Website của bạn

Tắt Tiếng Việt Kiểu gõ Telex Kiểu gõ VNI