|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间# x* `3 Q4 Z: }: a( f0 j j+ a
<SCRIPT language=javascript ># Z- r1 I/ g! P- v( ]
document.write(
0 }4 s) i. o$ u# O"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\6 E; H; P+ C7 g5 c" G& A8 w
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");* H$ W' ^* h& @" U
8 J- B' L/ u9 C6 C1 I0 \function showtip(text) //显示链接的说明% k2 }" X; N9 g; y( ^
{+ @9 j4 |* f+ u9 \2 v+ M& h
if (document.all&&document.readyState=="complete") //针对IE
+ @, F' Z# ]1 _, j2 q" [ {
& B7 j, W5 y8 ?9 r6 _, B% a8 [ 4 E9 } z/ Z/ ]2 ?! T2 C
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
+ A) U- K% G8 }( l document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
' _3 i% L* W Y: O3 m document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
2 K- K* K6 _) t2 y0 K document.all.tooltip.style.visibility="visible";
7 i* Y; t" S; q+ s* b' T }
- o m& v! r3 z- g- L; ]$ o}. M& { K! x9 ~
2 a& s" h+ ]" G1 m4 E$ T+ b7 I$ @
function hidetip()
5 C, w" P N+ L3 ]! E5 T{
@: s4 a# S' x/ r; {( Pif (document.all)
0 L3 C0 T, N% f# [ document.all.tooltip.style.visibility="hidden";
. y" }9 c" h1 c* ?}
, ^* z+ a& S( m6 v* ~" @
: j* P) ~- K O8 f, c) H6 s% Efunction setcolor(fntcolor,bgcolor)' O9 R# e1 H. R1 U# W
{- P v- [$ r7 G7 ^% P
document.all.tooltip.style.bgcolor=bgcolor;
3 C- \) R. O3 C: H% E; m. k+ w document.all.tooltip.innerHTML.Color = fntcolor;
9 |; h% f0 {' U7 I}
5 X* q6 T$ y% J" Y$ ] E- P( X! x
, c( h- U8 d; \. {" u% qfunction showhint(text)
$ N; m- q0 d& `: X" c{7 A5 E1 `* V5 y! |
onmousemove=showtip(text);
& L- @" o8 q9 G3 o ? onmouseover=showtip(text);
* S+ h3 Z. ^* F8 W' ?& h/ L9 v onmouseout=hidetip();% `) c8 z- K# S! I( Q L; o
}
2 q! f+ p9 Z) t0 b</SCRIPT>/ g+ G* K5 T3 l
' ~# x& {0 P# b; S# K4 |& c+ A' A
# {" u" H( j, y9 c: P3 @/ G$ k/ q% Y: }9 o8 l( ]/ P
8 b* d% j7 J+ f# Z$ W6 E5 N3 D: s# _6 ?% r6 X
- g- F5 x5 y5 ^) W( Q* `二：将下面的代码复制到〈BODY〉区) B6 X! C; h* N* _" L& p3 ?
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 $ u6 j* r+ `6 n/ P5 X8 M
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
A8 H9 B' S6 _ <tbody> & C3 }, I" v0 Y. k1 W
<tr align="center" bgcolor="#ffdfd0"> " K" A9 G. H; ?: P' P
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
7 Z7 ?& ^1 X7 r# Y7 s2 O) ^ target=_blank>赏心悦目</a></td>2 j( X$ k4 h& ~& k% W* h8 x+ J; g
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
c5 P5 [8 s) ^% p* d9 d onMouseOut=hidetip()>网页素材</a></td>
H5 g% }4 g* o' t# Y <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
9 o) H1 N9 d2 F target=_blank>图像处理</a></td>, g4 F7 \8 s6 \( r9 u$ }( X
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
b# A& y; k0 G h3 r target=_blank>网页特效</a></td>8 ?+ M/ G7 R) z/ J
</tr>; M7 q% C0 E5 X1 K# ~3 n
</tbody> " f* |3 F3 o3 a8 x' S3 v9 J/ m5 Y
</table> |
|
发表于 2008-1-21 20:52
|