Script giúp tạo Tooltip cho liên kết hoặc hình ảnh trên trang web

Chia sẻ mã nguồn và kinh nghiệm lập trình PHP, JavaScript, jQuery,...
Nội quy chuyên mục
Thành viên đăng quảng cáo trong chuyên mục này sẽ bị xóa toàn bộ bài viết và cấm vĩnh viễn tham gia Diễn đàn.

* Xem qui định đăng bài viết tại đây: Nội quy đăng bài viết
Đăng trả lời
FreeCode
Thành viên mới
Thành viên mới
Bài viết: 7
Ngày tham gia: 10/11/2019 - 15:28

Script giúp tạo Tooltip cho liên kết hoặc hình ảnh trên trang web

Gửi bài gửi bởi FreeCode » 10/11/2019 - 16:17

DHTML JavaScrip Tooltips là một thư viện JavaScript giúp tạo Tooltip cho liên kết hoặc hình ảnh trên trang web. Khi bạn chỉ con trỏ chuột vào Text, Link hay Image thì sẽ nó sẽ hiện lên một hộp chú thích hay mô tả cho Text, Link hay Image,...

Cách sử dụng DHTML JavaScrip Tooltips:

1. Tải thư viện DHTML JavaScrip Tooltips tại đây:
Sau khi tải về bạn giải nén được một tập tin tên là wz_tooltip.js hãy đặt nó vào một thư mục nào đó trên trang web của bạn.

Chẳng hạn như nếu sử dụng trang web Joomla! thì bạn có thể đặt nó trong thư mục chưa các tập tin JavaScript của template:

Mã: Chọn tất cả

templates/tên_template_của_bạn/js
2. Khai báo liên kết đến Script này trong trang web của bạn như sau:

- Mở tập tin index.php trong thư mục templates/tên_template/ và dán dòng mã dưới đây vào ngay sau thẻ <body>

Mã: Chọn tất cả

<script type="text/javascript" src="templates/tên_template/js/wz_tooltip.js"></script>
3. Tạo Tooltip cho Text, Link hay Image theo cú pháp như sau:

Mã: Chọn tất cả

onmouseover="Tip('Chú thích cho cho Text, Link hay Image')" onmouseout="UnTip()"
Tạo Tooltip cho Text:

Mã: Chọn tất cả

<span onmouseover="Tip('Chú thích cho cho Text')" onmouseout="UnTip()">văn bản</span>
Tạo Tooltip cho Link:

Mã: Chọn tất cả

<a href="index.htm" onmouseover="Tip('Đây là trang chủ')" onmouseout="UnTip()">Trang chủ </a>
Tạo Tooltip cho Image:

Mã: Chọn tất cả

<img src="/images/image.jpg" onmouseover="Tip('Chú thích cho cho Image'')" onmouseout="UnTip()">
Ngoài ra bạn cón có thể tạo thêm các hiệu ứng khác cho Tooltip.
Xem thêm hướng dẫn cách sử dụng DHTML JavaScrip Tooltips tại đây: http://www.walterzorn.de/en/tooltip/tooltip_e.htm

Đăng trả lời
  • Các chủ đề liên quan
    Trả lời
    Xem
    Bài viết mới nhất

Quay về