ANHVAEM

WOULD YOU WAIT FOR ME FOREVER?
 
Trang ChínhCalendarGalleryTrợ giúpTìm kiếmThành viênNhómĐăng kýĐăng Nhập

Share | 
 

 [Codes] Hiệu ứng tooltip

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down 
Tác giảThông điệp
tuongthomhnhp
ADMIN
ADMIN
avatar

POSTS : 2296
Points : 2147483647
Reputation : 0
Join date : 03/10/2011
Age : 24
Đến từ : tiến thắng mê linh hà nội

TÌNH YÊU CHO MỌI NGƯỜI
GAME:
CC:

Bài gửiTiêu đề: [Codes] Hiệu ứng tooltip   Mon Nov 21, 2011 11:52 pm

1. Chèn đoạn sau vào Overall_footer

[spoiler]<script type='text/javascript' src='http://www.c3zone.net/html-h33.htm'></script>[/spoiler]

Chèn đoạn sau vào cuối CSS


[hide]#dhtmlpointer, #dhtmltooltip
{
z-index: 999;
left: -300px; top:0px;
visibility: hidden;
position: absolute;
}
#dhtmltooltip
{
border: #666 2.4px solid;
-moz-opacity: 0.8; /* lam mo tooltip FF */
opacity: 0.8; /* lam mo tooltip Opera */
filter: alpha(opacity=80); /* lam mo tooltip IE */
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
padding: 10px;
font-size: 10pt;
font-family: Arial;
background-color: white;
width: auto;
max-width: 340px; /* chieu rong toi da cho FF */
width:expres​sion( document.body.clientWidth > 340? "340px": "auto" ); /* chieu rong toi da cho IE */
text-align:left;
}[/hide]


. sử dụng tooltip theo mẫu:

[spoiler]<span onmouseover="showtip('Nội dung trong tooltip');" onmouseout="hidetip();">Vùng rê chuột vào hiện tooltip</span>[/spoiler]


ví dụ: bạn muốn mỗi khi rê chuột vào chữ 'đăng ký' thì nó sẽ hiện:
'do dự chi nữa. tạo nick vô rum chơi liền đi.'
thì bạn sẽ chèn như ri:
Nội dung trong tooltip: do dự chi nữa. tạo nick vô rum chơi liền đi
Vùng rê chuột vào hiện tooltip: chỗ codes đăng ký a href="/register">
ví dụ rứa đó.


[spoiler]<span onmouseover="showtip('do dự chi nữa. tạo nick vô rum chơi liền đi');" onmouseout="hidetip();">a href="/register"></span>[/spoiler]

Dùng tooltip cho recent topic ngang:

Tìm trong Mod_recent_topic đoạn sau:
[spoiler]<a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}
</a>[/spoiler]

bạn coi cái ni do trùm admin Việt K rum c3z chia sẻ về tooltip nì:
[You must be registered and logged in to see this link.]
vlt chỉ copy lại thui nghen. hehe.
[special thanks from 4ALL to c3z. hehe]

Hiện tooltip khi rê chuột lên đối tượng

demo:
Spoiler:



hướng dẫn:

1. Chèn đoạn sau vào Overall_footer
Spoiler:
Code:Chọn nội dung
<script type='text/javascript' src='http://www.c3zone.net/html-h33.htm'></script>


2. Chèn đoạn sau vào cuối CSS
Spoiler:
Code:Chọn nội dung
#dhtmlpointer, #dhtmltooltip
{
z-index: 999;
left: -300px; top:0px;
visibility: hidden;
position: absolute;
}
#dhtmltooltip
{
border: #666 2.4px solid;
-moz-opacity: 0.8; /* lam mo tooltip FF */
opacity: 0.8; /* lam mo tooltip Opera */
filter: alpha(opacity=80); /* lam mo tooltip IE */
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
padding: 10px;
font-size: 10pt;
font-family: Arial;
background-color: white;
width: auto;
max-width: 340px; /* chieu rong toi da cho FF */
width:expres​sion( document.body.clientWidth > 340? "340px": "auto" ); /* chieu rong toi da cho IE */
text-align:left;
}


3. sử dụng tooltip theo mẫu:
Spoiler:
Code:Chọn nội dung
<span onmouseover="showtip('Nội dung trong tooltip');" onmouseout="hidetip();">Vùng rê chuột vào hiện tooltip</span>


ví dụ: bạn muốn mỗi khi rê chuột vào chữ 'đăng ký' thì nó sẽ hiện:
'do dự chi nữa. tạo nick vô rum chơi liền đi.'
thì bạn sẽ chèn như ri:
Nội dung trong tooltip: do dự chi nữa. tạo nick vô rum chơi liền đi
Vùng rê chuột vào hiện tooltip: chỗ codes đăng ký a href="/register">
ví dụ rứa đó.

Code:Chọn nội dung
<span onmouseover="showtip('do dự chi nữa. tạo nick vô rum chơi liền đi');" onmouseout="hidetip();">a href="/register"></span>








Dùng tooltip cho recent topic ngang:

Tìm trong Mod_recent_topic đoạn sau:
Spoiler:
Code:Chọn nội dung
<a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}
</a>

thay bằng đọan:

[spoiler]<a onmouseover="showtip('Tiêu đề: {classical_row.recent_topic_row.L_TITLE}<br>Thời gian: {classical_row.recent_topic_row.S_POSTTIME}');" onmouseout="hidetip();" href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a>[/spoiler]

____________tonytuonghnhp___________
TONYTUONG&PHANTHOM
Về Đầu Trang Go down
Xem lý lịch thành viên http://tonytuong.up-with.com
 
[Codes] Hiệu ứng tooltip
Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang 
Trang 1 trong tổng số 1 trang

Permissions in this forum:Bạn không có quyền trả lời bài viết
ANHVAEM :: DANH MỤC CHÍNH :: GÓC IT FRVI-
Chuyển đến