|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
$ p. o/ p0 }/ G& A4 j<SCRIPT language=javascript >8 R" L5 W& D/ r
document.write(4 D5 \9 j" s' }
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
( G8 O+ e: x; X' J) G; a+ t* [;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
* w, h% C3 S# `6 |
/ N. H+ h, Y P& f: m4 y) ufunction showtip(text) //显示链接的说明
. d/ R2 C8 J6 x4 h+ W% e{
! x) N6 a- U9 e% X/ m& v1 A if (document.all&&document.readyState=="complete") //针对IE
2 ~# R. @8 P, `6 u% A# m {" s/ t# B* k" j. |+ }$ ^2 o
. q5 G* ~5 Y& A+ _3 D$ n$ z8 t: ? document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";0 n' S7 h: T, C. e. j
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
& n; D% ?* p. m3 n, K" H4 \1 L document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;7 s+ y& [* m$ @( P' |
document.all.tooltip.style.visibility="visible"; l3 E1 c! ~7 {. R4 b
}2 I7 m; V8 }" L" u$ V
}' |. d, ~9 Q8 P( A: A; ?/ F
0 A! g) D2 I6 o! O0 _! ]
function hidetip()
5 I f! y+ y$ v/ a{9 ^' p# a9 U6 r: a( v" m
if (document.all)! q: P) D$ O8 L3 `
document.all.tooltip.style.visibility="hidden";
- m! U; i. t8 T. J: M}
6 f. a/ v8 G. R% Y: j) s
' L; ]. C; Z! Y1 O5 Cfunction setcolor(fntcolor,bgcolor): {4 @; b3 C5 h, t4 Z( z
{) X6 F ?. W/ s3 f9 P* d4 p
document.all.tooltip.style.bgcolor=bgcolor; j/ }8 L6 \1 I4 ?" U
document.all.tooltip.innerHTML.Color = fntcolor;! V& ^; n0 P9 F1 o7 K1 X0 e3 l
}
& o' J8 ~/ P) Z h2 {2 L* q, J6 P8 x" H6 _
function showhint(text)
$ K. o1 Q" S. ?) U{6 w5 c0 G: R/ Q0 Q! I
onmousemove=showtip(text);
' m2 {' ~. O8 w' o- O( I onmouseover=showtip(text);5 Y! b" o5 y. p3 a9 X! m
onmouseout=hidetip();
" `7 y* ?( `( J, K+ I% S' F}' }, x# _- U$ w
</SCRIPT>
4 Z5 D. \3 U* U* g" i& M E2 g3 Y8 {+ @5 J& B; k& p; s; M
8 N; Y+ L8 p& g( m( E$ m1 j
0 [+ ^. W' `/ O& L3 }* ?- z
5 t; i$ W, o( b; n! x; s1 r
. t: G" m2 _: w w$ |: T
! i, h) e! v- `; h8 T5 R8 \% p& }二：将下面的代码复制到〈BODY〉区; q2 L1 @8 F& @: w; F
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 " a Y. c: E0 I) n) E7 h
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">/ `) |% r, o1 t
<tbody> * P( O/ G! F! |% [
<tr align="center" bgcolor="#ffdfd0"> 3 J2 F/ \" b. W. }. R, u* x& s# g
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
; j2 B3 c( Z* B" R8 v target=_blank>赏心悦目</a></td>6 _& z, F0 i0 s# M$ z
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
l. W1 d" N0 N! I% L0 s onMouseOut=hidetip()>网页素材</a></td>
& j% Y* u; i( d, m' B <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
6 m+ z( ]9 A/ f9 P9 O target=_blank>图像处理</a></td>
5 ?! n- s' ~- W( d8 u <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
: p) M: c ` D% i target=_blank>网页特效</a></td>3 ^& m1 V5 n& {" Z
</tr>6 K. V& z3 j( _# X
</tbody>
3 `1 y \7 V& \( Y1 l) |8 x, B </table> |
|
发表于 2008-1-21 20:52
|