02. Một thủ thuật nhỏ cho các liên kết bằng hình ảnh

02.10.2010

Hover Effects For Image Link

[FD's BlOg] - Bài viết này mình sẽ hướng dẫn tạo một hiệu ứng nho nhỏ cho các liên kết bằng hình ảnh. Đó là hiệu ứng phóng to ảnh khi rê chuột tới liên kết bằng hình ảnh đó. Và với thủ thuật nhỏ này, ta sẽ tạo ra các liên kết bằng hình ảnh trông bắt mắt hơn. Phổ biến nhất là tạo các menu dạng hình ảnh.

Ở đây mình sẽ đưa ví dụ về menu liên kết dạng ảnh.
Đầu tiên bạn phải có các hình ảnh để tạo liên kết. Để trông đẹp mắt thì mình khuyên các bạn dùng các ảnh nhỏ, chừng 50px là được, và cái nữa là các hình phải là hình vuông. Ví dụ 50x50 px.

Các bạn tham khảo đọan code CSS sau:

#newnavbar ul li{ list-style-type: none; display:inline; margin:0px; padding:30px; border:0px solid; } #newnavbar li a img{ height:30px; width:30px; } #newnavbar li a:hover img{ height:40px; width:40px; background: #ffff66; } #newnavbar li a:visited img{ height:30px; width:30px; background: #6D7B8D; }

►Đọc hiểu code:

- Với đọan code này:

#newnavbar li a:hover img{ height:40px; width:40px; background: #ffff66; }

-> liên kết ảnh khi chưa có tác động vào sẽ có kích thước ảnh là 30x30px, và không có màu nền. (xem hình bên dưới)

- Khi có tác động rê chuột vào, ảnh sẽ được phóng to lên thành 40x40px, và có màu nền là màu vàng. (xem đọan CSS bên dưới)

#newnavbar li a:hover img{ height:40px; width:40px; background: #ffff66; }

- Tiếp tục với đọan CSS cuối cùng, đọan code này sẽ hiển thị những liên kết đã được truy cập, và hình ảnh thu nhỏ lại về 30x30px, và màu nền sẽ là màu xám.(xem đọan CSS bên dưới)
#newnavbar li a:visited img{ height:30px; width:30px; background: #6D7B8D;} }
- Theo mình nghĩ, nếu muốn tạo menu kiểu liên kết ảnh như thế này thì bạn không nên dùng hình nền và tạo hiệu ứng khác khi các liên kết đã được truy cập. Như vậy thủ thuật còn lại chỉ là phóng to ảnh khi đưa chuột tới liên kết mà thôi. Như vậy ta sẽ bỏ hẳn dòng background: {mã màu}; trong mỗi ID và bỏ hẳn ID #newnavbar li a:visited img trong đọan code CSS trên.

►Bonus: nhân tiện mình hướng dẫn luôn cách tạo 1 menu dạng liên kết ảnh đơn giản.
1. Đăng nhập blog.
2. Vào bố cục (Layout)
3. Vào chỉnh sửa code HTML (không cần chọn Mở rộng tiện ích)
4. Chèn đọan code CSS (như giới thiệu ở trên) lên trên dòng ]]>
5. Tạo 1 widget HTML/Javascript và dán code bên dưới vào.

<div id='newnavbar'> <ul> <li><a href="URL of Home page"><img src="URL of Home image"></a></li> <li><a href="URL of Music page"><img src="URL of Music image"></a></li> <li><a href="URL of Books page"><img src="URL of Books image"></a></li> <li><a href="URL of Links page"><img src="URL of Links image"></a></li> <li><a href="URL of Profile page"><img src="URL of Profile image"></a></li> <li><a href="mailto:YOUR EMAIL ADDRESS"><img src="URL of Email image"></a></li> </ul></div> }

6. Thay đổi link liên kết và link của hình ảnh thành các liên kết và hình ảnh của bạn.
7. Save widget lại, và di chuyển đến nới muốn hiển thị, sau đó save template.

Như vậy đã xong.
Chúc các bạn thành công.