|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间6 s+ s# X; `' {5 Y& g
<SCRIPT language=javascript >
$ y* A& s, H+ ~ q0 Udocument.write(- W6 W, }# d# D' W9 K/ \6 z6 H% o* O
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\9 X o E# C/ V4 P
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
7 m. R7 o9 `% U
; u4 d6 o2 s2 L I S2 G( g# k% Nfunction showtip(text) //显示链接的说明3 c0 Z* x1 q1 {+ r4 I/ i3 q
{
# W4 v' _3 T9 {$ \9 ?+ M: N# O if (document.all&&document.readyState=="complete") //针对IE# T2 V( g; f) p$ s* l7 E; ?: {
{5 W; T# Z6 y7 c0 w
0 Q- r3 `8 S1 b% w0 v document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";" i5 v! n3 p# g. R* S2 H, V" H
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
& N- t. |: h6 P; [5 L6 i9 W document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
7 k( T" P; ~# U document.all.tooltip.style.visibility="visible";
( [& B% N6 K0 j) w# L }
8 N6 r, `9 B% k! b/ c}+ T, \4 l0 v% A7 L
9 `0 \; L6 ^$ c. R0 @5 C- j
function hidetip() ' I/ l( ?+ Q4 F$ h; m" J
{
( D" |1 b0 b6 b5 v# Q. bif (document.all)5 T; \# I; N/ N" |6 l
document.all.tooltip.style.visibility="hidden";
, p/ Q# S- G$ F: _. q* ?: Z}' x$ Z; u( I2 p4 I H7 ^
/ O: `1 O: B4 m+ G: [2 ~function setcolor(fntcolor,bgcolor)" ]# z0 r/ O ]' e4 C" `
{
- N' L. j# S8 ~# q! b document.all.tooltip.style.bgcolor=bgcolor;- x5 s, i. J3 l
document.all.tooltip.innerHTML.Color = fntcolor;5 x6 z4 w; r9 C# w9 {
}' q# n( j7 s$ I/ E
" A6 K5 \) ~. B2 z4 h: u& a% y) V0 [function showhint(text)
$ K6 a: I: \3 O* b& Y" S{
6 x% R% I$ r: t1 W onmousemove=showtip(text);
" A, C7 i0 O4 o, H( U+ }8 ]& m onmouseover=showtip(text);
: S* Q* A) f1 }7 G% Z onmouseout=hidetip();
* W" N5 _0 j- T- _) k+ Q}: L2 G! l) M4 K% v: Q: {& }7 ]8 @
</SCRIPT>
8 {% Q# d4 N8 Z2 h0 F+ d/ f% T( p1 [+ |9 v5 v- V" c( s4 U2 c, W& ^1 ]
% B$ K. G0 v$ X% H6 k) C, c$ e
6 |& ?% ?' B( M: X" q0 C* f. i9 B! \) R
. B& G( `) e4 e0 e- K. [, W. ~
( g1 t4 ~5 D& A1 ~2 M/ z二：将下面的代码复制到〈BODY〉区
& `" [" R0 C6 z6 j, E9 Y<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 ; U8 E3 w, v7 `8 q
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
6 L. x1 C8 T. E" J <tbody> % B' H: y7 M* k1 @5 s) `
<tr align="center" bgcolor="#ffdfd0"> 5 l' F- J4 T. E9 q6 Y
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() . p9 C8 w8 g6 n/ V4 b! Q
target=_blank>赏心悦目</a></td>
: v/ V8 }, H1 {5 Q: e <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
4 {) c9 Y: [9 H1 m8 P O onMouseOut=hidetip()>网页素材</a></td>
1 w3 Y W/ _4 n2 ?$ |) S" `5 J" | <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() 2 X* E* d5 P' G$ o: v' E% z
target=_blank>图像处理</a></td>
* z5 v% v/ l* z' I* x! a <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 0 ?5 E6 G# h, r& h' l/ Z& E) N
target=_blank>网页特效</a></td>
- s" S0 f+ G$ f' F3 u </tr>
7 r( ]3 ]9 p! i1 q( @ b </tbody>
4 B; k' O$ y `+ g: Y5 ~! O: t$ d </table> |
|
发表于 2008-1-21 20:52
|