|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间& o5 `9 j1 x9 ~/ L5 A
<SCRIPT language=javascript >
4 ?# @2 e E7 ?7 H; g- l L) N# Pdocument.write(+ \' [ M+ T! j9 F* [
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
6 P$ L9 W% h2 Q1 Y;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");6 W9 A7 G N& r! @5 B
' o7 s" T1 d" t0 ?function showtip(text) //显示链接的说明
. p, G" I v' ]1 p" m{
% u: p) n5 G! z8 B* H1 T if (document.all&&document.readyState=="complete") //针对IE
# P, t% k- b! W3 ]8 C5 G4 h {
- F7 Q. l; d0 r# f8 ^" R/ @3 J 1 A9 p2 P0 ?6 g& w; a2 N% c
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";8 J! y$ o) m7 t
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;' u" w' S5 _% v, Y; z" T
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;. x& M! t! r* F& o! y, M) m0 g
document.all.tooltip.style.visibility="visible";
) b9 |/ Q0 B& x0 E6 v3 x }
* C1 s5 C% @8 E, G}
: K1 R8 Y8 Q+ ^. X7 \9 H2 q
. n* {8 v' n! T, n4 U5 s+ kfunction hidetip()
2 A5 A5 v9 l8 L* A0 G% r0 ]* q{
- B/ }" q4 [" B# Jif (document.all)7 a- ? N- {. G- W( C( F& ?8 T+ x
document.all.tooltip.style.visibility="hidden";& R5 y1 ]' J, W0 r2 D6 E9 x3 K
}
7 _/ s9 G8 ~& N( _- U
0 f& M( A# R& ?/ Q) |1 F2 wfunction setcolor(fntcolor,bgcolor)- V* t, U4 A8 A7 e, c+ S6 ^3 C, v
{( v2 Q4 Z. A9 X0 b6 c- X% _/ L0 N, ?
document.all.tooltip.style.bgcolor=bgcolor;! J4 v& d+ @3 u* c% ^ w
document.all.tooltip.innerHTML.Color = fntcolor;$ R9 R' J" F! a' g
}
: P& _1 J0 |4 j, s9 e3 j5 ^: V$ Q* u) t- p6 g0 z& f
function showhint(text)
' d5 P! c. s3 N4 `" Q3 [! f _3 C* [{
$ l' ?0 }- u4 N! ~7 _# P( k onmousemove=showtip(text);
* q+ G |, B- H( X7 q* @. S9 ~3 Z$ G onmouseover=showtip(text);- J3 a1 Z3 s5 S& ]4 p5 Z' e
onmouseout=hidetip();3 r& l5 e0 U# N0 S
}
+ |) @& f8 e6 l5 K0 N- B* O</SCRIPT>; o' G4 @+ h/ V3 V2 \2 a( z1 c4 F
& B/ v0 s, {2 S
+ v. Z! c7 Y% _. T4 F
1 d/ g" i4 A& k, U1 }9 k$ ~ N) d! g( c
) L+ @+ `2 N, H' T0 Y# q1 }% q. [
, ?- l3 I! L# h Q$ P3 w/ F& l
二：将下面的代码复制到〈BODY〉区
2 Z# Q. Z& l) w/ y9 Z- w% S0 n<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 1 R/ L. ]) X5 H' ~% L
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
* l5 X8 V$ r9 v; Y <tbody> 4 Q2 i: w, l% M/ N% t
<tr align="center" bgcolor="#ffdfd0"> ) R1 C% n; I. ]: o- Q1 Z& J9 p& L- T
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() - {; j7 b. S2 j
target=_blank>赏心悦目</a></td>" U' r7 s+ {; m8 ?- i, w0 ^
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
# p) ~" t$ z; `! P1 N- o5 S, M onMouseOut=hidetip()>网页素材</a></td>
1 @$ W: K L5 B% b, ] <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() 6 n4 ]" C5 ^% F5 a) X& \* w$ r5 c" e
target=_blank>图像处理</a></td>0 ~4 D' a; M% |1 m
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
. t/ X" J) a8 J3 s* X3 ^7 I target=_blank>网页特效</a></td>
8 f" E3 o7 ?5 E* l- w6 v* t </tr>
- s3 ?" ]( H. n* ` </tbody>
5 U+ m) Q6 J- F. F1 h </table> |
|
发表于 2008-1-21 20:52
|