Hướng dẫn làm bảng thông tin cho liên kết.

[hunghsmn]

Mình đang viết trả lời trong một topic nhưng khi lưu thì bị khóa mất nên phải viết lại ra một topis khác. Trong topic đó CPPoint có viết:

@pac hùng, bác có thể viết 1 bài kỹ lưỡng hướng dẫn bọn em cách làm cụ thể được không ạ. VD như, các yếu tố cần thiết, chèn ở đâu thì đối tượng muốn hiệu ứng có tác dụng...
Hay lắm bác ơi.

Bác trả lời cháu như sau:
1/ Trước hết cháu vào trang này của bác View page Source lấy code sửa lại chữ diễn đàn tình thương bằng tên của diễn đàn của cháu. Sửa các thứ khác như bác đã nói trong topic đã khóa kia. Sau đó tạo một trang htmk cho code đã sưart vào:

Code:

http://www.trekhuyettat.org/h186-page

( Nguyên thủy đây là một file JS của một bạn bác quên rồi , chia sẻ từ năm 2009. Bác cho vào html để tiện sửa chữa, để trong JS cần sửa phải down về, sửa rồi up lại rất mệt)

2/ Vào trang mà cháu muốn tạo tooltip cho liên kết (Bất cứ trang nào) cụ thể ở đây bác nói là Mod_Recent_topic). Cháu chèn code này vào: <script src="link trang html đã tạo bên trên"></script>

3/ Viết tooltip. (Chú ý: đây là phần quan trọng nhất, rất dễ lỗi):
- Tổng quát: một liên kết nói chung có dạng: <a href="http://link">text</a>.
Bây giờ cháu viết tooltip cho nó thì code đó thành như thế này:

Code:

<a href="http://link" onmouseover="Tip(' Nội dung tooltip ')" onmouseout="UnTip()">text</a>

Chú ý: Nội dung tooltip phải viết liên tục, không được enter xuống dòng. Có thể chèn ảnh vào nội dung tooltip nhưng không được cho link ảnh vào trong nháy đơn nháy kép. Ví dụ: Viết sai: ' Nội dung tooltip <img src="http://link ảnh"> nội dung tooltip...'. Viết đúng: ' Nội dung tooltip <img src=http://link ảnh> nội dung tooltip...'

- Vận dụng vào trường hợp cụ thể là trang Mod_Recent_Topic:
Code của tiêu đề bài viết có dạng như thế này:

Code:

<a href="{classical_row.recent_topic_row.U_TITLE}"> <span  style="font-family: Times New Roman; size: 11px; color: #0000C0;">{classical_row.recent_topic_row.L_TITLE}</span></a><br>

Ta chèn nội dung tooltip vào thì thành như sau:

Code:

<a href="{classical_row.recent_topic_row.U_TITLE}" onmouseover="Tip(' <b> <font color=red> <center>BẢNG THÔNG TIN </center><br> Tiêu đề: </font> </b>  {classical_row.recent_topic_row.L_TITLE}<br><b> <font color=red>Ngày gửi:</font></b> {classical_row.recent_topic_row.S_POSTTIME} ')" onmouseout="UnTip()"> <span  style="font-family: Times New Roman; size: 11px; color: #0000C0;">{classical_row.recent_topic_row.L_TITLE}</span><br>

Vậy là khi rê chuột lên tiêu đề bài viết ta sẽ có tooltip hiển thị 2 nội dung là tiêu đề bài viết và ngày gửi sau cùng.

Bây giờ nếu muốn tootip hiển thị thêm người gửi sau cùng nữa thì code sẽ như sau ( với điều kiện forum không dùng màu cho nick thành viên, không dùng màu cho nhóm, nghĩa là không chơi icon trước nick luôn):

Code:

<a href="{classical_row.recent_topic_row.U_TITLE}" onmouseover="Tip(' <b> <font color=red> <center>BẢNG THÔNG TIN </center><br> Tiêu đề: </font> </b>  {classical_row.recent_topic_row.L_TITLE}<br><b> <font color=red>Ngày gửi:</font></b> {classical_row.recent_topic_row.S_POSTTIME} <br><b> <font color=red>Người gửi sau cùng:</font></b> <!-- BEGIN switch_poster --> {classical_row.recent_topic_row.switch_poster.S_POSTER}<!-- END switch_poster --> ')" onmouseout="UnTip()"> <span  style="font-family: Times New Roman; size: 11px; color: #0000C0;">{classical_row.recent_topic_row.L_TITLE}</span><br>

Nếu muốn thêm ảnh vào nội dung tooltip Ví dụ thêm câu: " Nếu thấy bài viết hay bạn có thể click vào nút để động viên người viết. Ngược lại nếu không hài lòng bạn có thể click nút: . thì code trên sẽ thành:

Code:

<a href="{classical_row.recent_topic_row.U_TITLE}" onmouseover="Tip(' <b> <font color=red> <center>BẢNG THÔNG TIN </center><br> Tiêu đề: </font> </b>  {classical_row.recent_topic_row.L_TITLE}<br><b> <font color=red>Ngày gửi:</font></b> {classical_row.recent_topic_row.S_POSTTIME} <br><b> <font color=red>Người gửi sau cùng:</font></b> <!-- BEGIN switch_poster --> {classical_row.recent_topic_row.switch_poster.S_POSTER}<!-- END switch_poster --><br> Nếu thấy bài viết hay bạn có thể click vào nút <img src=http://i66.servimg.com/u/f66/14/26/60/46/001_1910.png> để động viên người viết. Ngược lại nếu không hài lòng với bài viết bạn có thề click vào nút <img src=http://i66.servimg.com/u/f66/14/26/60/46/001_1810.png> ')" onmouseout="UnTip()"> <span  style="font-family: Times New Roman; size: 11px; color: #0000C0;">{classical_row.recent_topic_row.L_TITLE}</span><br>

Bác vừa nói vừa thực hành và kết quả cuối cùng là

Code:

http://www.trekhuyettat.org/forum

. Cháu vào rê chuột lên tab tổng hợp để xem.

Để kết thúc bài viết này, bác đề nghị:
Cháu vận dụng sáng tạo cho bất cứ trang nào, bất cứ liên kết nào như bác nói ở phần đầu bài viết, chứ không chỉ dùng cho latest topic. Giá trị thực sự của script này là ở đây. Quá lâu rồi bác không nhớ bạn nào đã chia sẻ để chỉ cháu click + cho bạn ấy. bác chỉ là người vận dụng sáng tạo mà thôi.

Xin phép bác cháu move qua box TUT

[hunghsmn]

Cám ơn cháu! Bác thêm chút: Bác đã từng treo giải 200.000 đ vào điện thoại của cháu nào làm cho tooltip tự động cập nhật một đoạn đàu của nội dung bài viết ( giống như bác thấy trên nhiều báo điện tử). 200.000 tuy chưa đúng giá trị nhưng bác nghĩ vậy là vui rồi, vừa vui vừa có giá trị thiết thực.

[hunghsmn]

Một ứng dụng khác của tooltip là hiện bản thống kê diễn đàn.
Chèn code sau vào Index_body:

Code:

<script src="http://www.trekhuyettat.org/h186-page"></script>
<a href="#" onmouseover="Tip(' <b> <font color=red> <center>THỐNG KÊ DIỄN ĐÀN </center><br></font> </b>  {TOTAL_POSTS}<br>{TOTAL_USERS}<br> {TOTAL_USERS_ONLINE} <br>{RECORD_USERS}<br>')" onmouseout="UnTip()"> <img src="http://2img.net/i/fa/i/smiles/icon_biggrin.png?t=1312157917"><font face = "Tahoma" size = "3" color = "#FF0000"><B>Thống kê</B></font><br>

Các bạn sẽ thấy như hình:


Đó là Index_body. CÒn với các temp khác thì sao ? Câu trả lời dành cho các bạn

[hunghsmn]

Tool tip cho bất cứ đâu ?
Có một bạn đã đặt vấn đề như vậy.
Mình xin trả lời là được.

Theo bài này thì bất cứ đâu có link thì ta đếu viết được tootip cho link đó. Thậm chí nó không phải link thì ta biến nó thành link giả: <a href="#"> text</a> để viết tooltip. Ví dụ trong bản thống kê ở cuối diễn đàn có câu "Chúng ta cùng chào mừng thành viên mới đăng ký", đây là không phải link, nhưng nễu thấy chào như thế này không hay, muống chào nhiều hơn với những lời hoa mỹ hơn thì cũng không khó gì. Cho vào tooltip, chuột chạy qua là thấy ngay như thế này:

[ttpp90]

cái này cũng hay nhỉ bác Hùng

[Sấm]

Thanks bác Hùng nhé làm cái tooltip lấy 1 phần bài viết à

[handsomevip007]

Cháu cũng làm được tooltips trên mấy cái nút bài chỉnh sửa bài viết nè bác

Code:

http://www.a14toiyeu.net/t1280-topic

Nhưng cái tooltips hiện một đoạn đầu nội dung bài viết thì ...

[Sponsored content]