Ở các thủ thuật trước mình có hướng dẫn các bạn tạo hiệu ứng mô tả tooltips chỉ dùng CSS, ở bài viết này mình sẽ giới thiệu việc 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, không như cách ta dùng CSS, popup chỉ hiển thị ở 1 vị trí cố định.
Hình ảnh minh họa:
» Bắt đầu thủ thuật
1. Đăng nhập vào tài khoản Blogger2. Vào phần Mẫu (Template)
3. Chọn Chỉnh sửa HTML
4. Chèn đoạn code bên dưới vào trước thẻ đóng </head>
<script language="javascript" src="https://scipt-namkna.googlecode.com/svn/trunk/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>
Lưu ý: Bạn nên Download file js trên về TẠI ĐÂY và Upload lên Host riêng để dùng lâu dài nha. Nếu chưa có host thì xem bài này.
5. Save template.
Sử dụng chèn tooltips
<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 màu xanh cho tương ứng với link liên kết của bạn.
Chúc thành công!
Theo: Fandung.
Nhận xét
Cám ơn Nam đã hồi âm.
Trả lờiXóaNhưng mình chưa biết sử dụng chen tooltip này vào đâu trong teamp vậy Nam.
Chèn vào bài viết có được không?
Nam có thể làm giống như web http://www.thegioididong.com/ được không? Khi rê chuột vào SP nó hiện ra bảng thông tin tóm tắt đó?
Rất mong được hồi âm?
Ở trên có code chèn trong them và tròn bài viết đó bạn.
Xóalàm sao để lưu đoạn code dưới dạng file .js
Trả lờiXóaBạn đọc bài viết bên dưới nha. Trong đó có dạy cả cách tải và cách lưu file có sẵn đó.
XóaCách tải file Javarscript (Js) - CSS Blogspot và Website