|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
) q! a! z2 [/ K2 C+ b- z" E<SCRIPT language=javascript >3 Y2 X3 a0 Z. a/ P. Y/ J
document.write(
* B5 s/ E0 r# M8 [; g0 I8 K) K"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\7 ]( q0 p! I! `! d6 h# V
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
* x+ i# |$ s+ V& d
( o, ^* t* V% `2 ~8 _' u8 Zfunction showtip(text) //显示链接的说明4 m) U6 g) V2 w, o+ r% B
{
- R0 J# C& W1 @: m! H% G. P; W X) w0 t if (document.all&&document.readyState=="complete") //针对IE
! q, Z2 o9 F2 ?0 ~. E# r {
- c9 U- c9 Q4 V5 \3 n( z
9 p9 p! K+ K) v7 T# h! a, C5 j: | document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
. u# M. k" F% R2 h! L' ^ document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
; n- o% u1 g; w, [" L document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
* T1 v% d3 _ i document.all.tooltip.style.visibility="visible";* P3 x; Q0 i- M g% Q; Q0 }" X
}8 [1 M0 X9 t' D) T/ Z( l( H0 n! b
}
M$ R+ V+ v& m( U
) s3 ~8 j: J, mfunction hidetip() - M X4 ~8 I j' W% q
{( t& g! k, W2 I4 ?+ e( z# G* d- X
if (document.all)& V q: \$ {# h7 g/ R
document.all.tooltip.style.visibility="hidden";
& N, ~/ V' e B; I8 _ \}5 C e3 d0 m; S5 f) E( p, [1 M
# A. i4 y; h0 l* ~& t' y Hfunction setcolor(fntcolor,bgcolor)
" {" s) H- ~5 F2 T: W$ ?6 ]# H2 [0 }{
0 J; m' Z3 S- b$ f* |( G' S7 M document.all.tooltip.style.bgcolor=bgcolor;
: U. n) }, C! @ document.all.tooltip.innerHTML.Color = fntcolor;
3 q4 E; }* j" e}
! T W$ H: B: r [9 f8 j
9 A3 Y& D; I$ B0 T1 W. zfunction showhint(text)
0 [, Q* s& z1 Y) i j{2 X7 h5 |5 n) n3 I* Q
onmousemove=showtip(text);
3 k/ S7 M( b0 ^: A) p) z5 g onmouseover=showtip(text);% Z2 d( ~% R9 \7 q0 o
onmouseout=hidetip();; q/ J- D2 x* U/ K
}$ l8 A+ s9 t. Q: a/ R2 D
</SCRIPT># { \ P( t/ M) Z: u3 K6 u1 p1 @
1 Y* {) _: s8 Y0 h: n
) A, y0 x1 v8 e; v3 @# ?( I' s, y$ K8 o' M( _1 o' x" O8 |
" I/ Z' a T$ B9 q" k
( X) u1 r( T; a9 `6 U/ R A ]9 {6 y: W5 n. h9 F: Q( \0 G* y
二：将下面的代码复制到〈BODY〉区4 m7 @8 \3 W2 G& N1 h P
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 * ^2 f! h+ z) d1 } [5 d
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
/ x+ t9 p& x4 k y1 X2 j5 C <tbody>
! {& Q% H# ]4 ~5 V <tr align="center" bgcolor="#ffdfd0"> ) y7 F, O" Y+ h6 e: k
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
0 g1 e& r, k0 M- n- Q" B0 v target=_blank>赏心悦目</a></td>4 c q# Q* \' g" x* c" i, k
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" & O7 l' D0 d; g8 O
onMouseOut=hidetip()>网页素材</a></td>
# Z, j. t( W p <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() ( W5 @& U2 U% s
target=_blank>图像处理</a></td>4 K, _ }+ t9 g% q
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
+ i- e7 b& i$ M% s target=_blank>网页特效</a></td>6 U0 r% r$ ?) D' s Y" S
</tr>
8 s) ~2 n" q9 J3 E/ ~( x </tbody>
@/ N6 L/ i) E$ V: \4 h3 \- q4 w </table> |
|
发表于 2008-1-21 20:52
|