Sunday, September 06, 2009

Tạo một tooltip thật ấn tượng bằng javascript


Trong các thẻ < a href > < / a > (thuật ngữ gọi là "anchor") hoặc < img >, bạn hay dùng thuộc tính alt để thể hiện tooltip của nó. Nhưng cái tooltip này có vẻ ko được bắt mắt cho lắm. Harry xin trình bày 1 cách tạo tooltip rất kool mà sưu tập được trên web.

+ Bước 1:

Bạn hãy chèn đoạn code stylesheet vào phần của trang html:




+ Bước 2:

Chèn đoạn code sau vào phần của trang, lưu ý bạn không được đặt trong bất cứ thẻ nào, đặc biệt là những thể như ,
...







+ Bước 3:

Cuối cùng bạn chỉ việc thêm đoạn code sau vào thẻ mà bạn muốn thể hiện tooltip:



onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)";

onMouseout="hideddrivetip()"





Ví dụ:




Clearly Mind




Trong đó:

+ Hàm ddrivetip(strTxt,colorCode,width): là hàm thể hiện tooltip nhận 3 đối số
. strTxt: chuỗi mà bạn muốn thể hiện thành tooltip
. colorCode: Mã màu nền của tooltip (ví dụ: #FFFFFF)
. width: Chiều rộng của không gian thể hiện tooltip
+ Hàm hideddrivetip(): hàm này không nhận đối số, dùng để giấu tooltip khi bạn rời khỏi vùng thể hiện tool tip.

Xem demo ở ngay trang chủ của forum :D

* Lưu ý:

Bạn phải bảo đảm rằng chuỗi tooltip mà bạn muốn thể hiện tuyệt đối không có những ký tự đặc biệt như: & , ' , " , \ , / , >, <