|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
7 o5 y5 D2 H" j1 y, i" r6 [+ F, I<SCRIPT language=javascript >
* A8 T2 w0 b. Odocument.write($ w0 J {1 X' \ g0 A
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\, f1 M& _5 B; b- a' h; {9 m8 @
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");9 @$ T& I, l4 G) \* ^
L; b. o1 [# d
function showtip(text) //显示链接的说明
( B9 Z8 F( u" J4 A2 d{ k' S: f5 D( ?0 z, c
if (document.all&&document.readyState=="complete") //针对IE
4 p+ N6 Q9 k# \0 }( `0 _ {# o8 k" S3 G% H6 s
& ^7 r7 t5 ~! j [3 B! ~" `
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";1 a# w- Z9 Y) l/ L) q
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
& [ h9 j+ j0 ^, H1 E$ z. h6 e document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;2 ~$ Z& D! \$ S7 |; c
document.all.tooltip.style.visibility="visible";" `' O& p' L3 q- }; y7 J A0 ]
}. V/ U9 H* f4 U+ |3 k
}
0 ]3 ?+ C. P- ~# | o
& g+ X! T# m1 r5 Q& S) b9 g7 gfunction hidetip() ' ]7 H& h/ D/ D3 T1 d; s
{) n* R1 j [& Y6 W7 a" j. S
if (document.all)
1 Z. R# e5 _. Q4 W3 v B document.all.tooltip.style.visibility="hidden";& L8 D _. @- @5 x _
}
6 `; N" ^! t: Z% Z% W2 P5 V; R& a+ w; D! y% L
function setcolor(fntcolor,bgcolor)7 |3 }& s. L3 s8 i4 h
{
9 H9 v' S( {) b9 H, W document.all.tooltip.style.bgcolor=bgcolor;
6 S1 i/ g. l1 r document.all.tooltip.innerHTML.Color = fntcolor;
( [( `/ \, U, ]% F}
* z. x8 ^) Q$ K( G9 N& {- c1 D: z, w/ B: X* u- \8 N+ _
function showhint(text)' x5 v* m0 s; P7 W# e
{
2 j; }' b7 d. G X onmousemove=showtip(text);
" N8 V4 M# X4 p4 N/ k onmouseover=showtip(text);
' m* Y9 o* R3 P onmouseout=hidetip();$ d2 T5 J9 X/ ^* c* Q2 ~/ C1 |
}1 d8 O( S, s6 f0 H2 B* D- ]: A! e( P4 k
</SCRIPT>
7 k( j n" H5 F2 l( X% X/ A5 i$ a( }
4 r- Y$ v, q6 k
% Q8 U/ F) e+ X$ l8 B
0 a1 W, q1 b3 Y" D6 K% d7 Z) u" k4 W Y( N
4 w- U) E) _: L$ ~& O2 \4 T
二：将下面的代码复制到〈BODY〉区
6 {* i( u4 N2 |$ e$ ~" I<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 ' s' g$ R1 s; R& H; U5 P% ^# I
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">/ a! O5 y/ l0 P! b% S
<tbody> 9 E. V3 x" e [6 }
<tr align="center" bgcolor="#ffdfd0">
4 ^. m( T: p) t0 a4 U <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
' T* A* \! f; z5 d# t& \8 } target=_blank>赏心悦目</a></td>8 S/ H6 u, N3 o `2 w
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" 7 F( T+ {2 w C% w; `, b- \
onMouseOut=hidetip()>网页素材</a></td>
& U0 l% E! `% ^ <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() * N2 ]7 b: A; V! h C" D9 W2 J
target=_blank>图像处理</a></td>3 w u2 o7 a5 a+ d- O5 |- H. J
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
: F; B" Q7 V7 c) r+ H, ~$ f. g target=_blank>网页特效</a></td>! a$ l+ R1 G, ~! c a1 [! l% k, _
</tr>8 G i" ^/ l8 Y+ |8 s. j+ r' |. L
</tbody>
3 z2 l) r: d; \; G8 o0 [ </table> |
|
发表于 2008-1-21 20:52
|