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>
#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!
No comments:
Post a Comment