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.
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!
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!
0 nhận xét | Viết lời bình