Laman

Hiệu ứng liên kết có mô tả sử dụng DHTML Tooltip và Javascript

0   nhận xét

Hiệu ứng liên kết dạng mô tả giúp cho người lướt web có thể có nhiều hơn thông tin về một liên kết trước khi kích trỏ để vào trực tiếp liên kết. Ngôn ngữ Javascript có thể được sử dụng kết hợp với CSS để thực hiện hiệu ứng này.


Xem trang demo demo.

Sau đây là hướng dẫn thiết lập hiệu ứng.

Đặt đoạn code sau vào giữa 2 thẻ <head>, </head> của trang web.

<style type="text/css">
#dhtmltooltip{
position: absolute;
width: 150px;
border: 2px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Xóa dòng phía dưới nếu muốn bỏ thuộc tính bóng mờ cho khung mô tả liên kết. Dòng này luôn xuất hiện sau cùng trong phần CSS này*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);

}
</style>
<script language="javascript" src="/tooltip.js"></script>


Bạn nên tải file tooltip.js về rồi upload lên webhost của mình sau đó đặt liên kết file vào scr.

Ở phần code cho liên kết, bạn thiết lập như thế này:

<a href="{URL của liên kết}" onmouseover="showtip('Phần mô tả của liên kết')" onmouseout="hidetip();">Tiêu đề của liên kết</a>

Hiệu ứng này có thể áp dụng cho Blogger, bạn hãy khám phá đi nhé! Rất dễ dàng!
Comment của bạn sẽ bị xóa nếu:
- Bạn chèn thẻ liên kết (a tag).
- Nội dung gây khó chịu cho các bạn đọc khác.
- Thắc mắc không liên quan bài viết, hãy post tại Hỏi đáp.
- P/s : Comment chê Admin xấu trai cũng sẽ bị xóa không thương tiếc :D

Comment của bạn sẽ bị xóa nếu:
- Bạn chèn thẻ liên kết (a tag).
- Nội dung gây khó chịu cho các bạn đọc khác.
- Thắc mắc không liên quan bài viết, hãy post tại Hỏi đáp.
- P/s : Comment chê Admin xấu trai cũng sẽ bị xóa không thương tiếc :D