Tạo hiệu ứng mô tả cho link liên kết

Trang chủ » Thủ thuật Blogger » Bạn đang xem:

Tạo hiệu ứng mô tả cho link liên kết

Thứ Ba, 20 tháng 7, 2010

Ở các thủ thuật này mình có hướng dẫn các bạn tạo hiệu ứng mô tả dùng JS. Với thủ thuật này thì popup mô tả sẽ di chuyển theo con chuột

Xem demo trực tiếp ở đây:http://bloggiaovienthaibinh.110mb.com/motalink/motalink.html

Hình ảnh minh họa:

1.Chèn đoạn code bên dưới vào trước thẻ đóng
<script language="javascript" src="http://bloggiaovienthaibinh.110mb.com/motalink/tooltip.js"></script>

<style type="text/css">
#dhtmltooltip{
border-right: black 1px solid;
padding-right: 4px;
border-top: black 1px solid;
padding-left: 4px;
font-size: 10pt;
z-index: 100;
filter: alpha(opacity=90);
-moz-opacity: .90;
-khtml-opacity: .90;
opacity: .90;
left: -300px;
visibility: hidden;
padding-bottom: 4px;
border-left: black 1px solid;
padding-top: 4px;
border-bottom: black 1px solid;
font-family: Arial;
position: absolute;
background-color: lightyellow;
width: 250px;
}
#dhtmlpointer{
z-index: 101;
left: -300px;
visibility: hidden;
position: absolute;

}
</style>

2. Và sau đây code HTML:

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

-Thay đổi code in đậm cho tương ứng với link liên kết của bạn.

Nếu áp dụng với blog Violet thì các bạn cho cả 2 code trên vào thêm khối chức năng

Chúc các bạn thành côngChữ to || Chữ nhỏ
Copy bài viết: