1 Hiệu ứng liên kết có mô tả sử dụng DHTML Tooltip và Javascript 18/01/12, 10:25 pm
[KiNg]_[PiN]-BB
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!
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!