|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间3 ^1 S- s& E: p$ {3 t, I
<SCRIPT language=javascript >) E2 \! ^$ d# b& o: ? v2 i
document.write($ E& ~& Q( x6 J$ ]- v, F$ {; h
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\: Y" n6 z# R% K6 [% B
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");1 I5 L7 h; u" s2 x
* G/ B3 b R6 A/ [/ _' N
function showtip(text) //显示链接的说明
- N0 w" [1 w! w) V# T/ C0 Z, Y- @{
& R7 i8 T2 ~) p, w if (document.all&&document.readyState=="complete") //针对IE
$ Q k7 Q" x8 P+ s+ d) R+ `! D1 z {
* u# T, d$ Z0 C. ~8 T
) \' E9 r! l) D- z document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";% ]5 Y; K0 ]. c3 R: k* L& }: l' p# g
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
7 }5 c& J% n3 G3 V( c8 J document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;9 h3 V; ?. w; r5 l# a. B2 L3 W5 J% m
document.all.tooltip.style.visibility="visible";
Q! D1 \! e2 _$ l( | }
$ y; Y# Z7 _1 D6 N6 u3 x8 J; j& h}: Q5 X H8 F2 ^
& x$ Q' M: M, T. W2 Nfunction hidetip() * _! h/ Q' r% r2 y
{
# ]- z0 k4 `/ V# \! i- V8 o/ Mif (document.all). Q6 B- o& Z; X9 _9 A
document.all.tooltip.style.visibility="hidden";
; K! A# k7 n6 k/ s}) {0 |6 |, l" X" E+ P9 G, f, x
" k' M" s* O. Y6 } Cfunction setcolor(fntcolor,bgcolor): c3 D* { B a6 T; e5 P1 d
{: B* w9 H5 X9 t8 y& B `: d) i
document.all.tooltip.style.bgcolor=bgcolor;
+ n0 f& [4 O# N R! O9 O1 { document.all.tooltip.innerHTML.Color = fntcolor;
& ~# j4 ?+ _6 r4 c2 u}
+ \. ?+ d- n. G$ N' m5 q. a. r- Z4 X) ]6 T- P* }) u& Z
function showhint(text)
9 f+ U6 K0 C+ _1 @7 F9 o$ r& i{$ j9 a- t- E% ~! t) I+ [" i" Z9 ?
onmousemove=showtip(text);& M1 \: J5 g1 U; }+ D, U* L
onmouseover=showtip(text);
! V/ u1 t/ y+ n: w3 {5 M, r onmouseout=hidetip();
5 ^# @, p, @' F7 V/ B+ O4 @}
( f0 A8 |1 {0 x9 o( Z$ E</SCRIPT>0 K. Z( _2 p' N1 F2 P5 @& U5 P
8 d- f+ \* U: m- `5 V2 @# o1 V. W& \, n
. k4 j& Z8 [) L7 m; M% g' k
! E0 f2 }) [: J1 v' D
3 ~) ^/ ?7 |9 f$ x# t: c3 i6 K+ p5 l, V2 a9 X. h
( d& T/ M8 m; B( Z" ~二：将下面的代码复制到〈BODY〉区
# X2 b4 E# H- G* U+ ~<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
/ D$ d, e- T# D. F, s+ Wcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
8 Y7 n' C. I Y! E1 K; [6 w3 d <tbody>
3 Y, r H& n% q6 f! k, K* M <tr align="center" bgcolor="#ffdfd0">
' d$ I1 X$ X! o. P- H, w4 n <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() 3 r7 G& H+ ]5 r% ?
target=_blank>赏心悦目</a></td>
( m1 z: R2 B7 L! R <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
- X' ?% ^* L+ E0 X1 t- Y! i0 j% t onMouseOut=hidetip()>网页素材</a></td>/ t) s& c4 v+ r0 [4 N
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() 3 M- E1 m- e- i" s1 y
target=_blank>图像处理</a></td>- v& j+ t3 R/ R5 M* R7 R$ e
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() $ l; I! h: c; ^' M \3 J/ |
target=_blank>网页特效</a></td>6 u; m1 ]; O1 \0 H+ L+ h
</tr>! o5 u2 ?* m: p0 e3 N2 ~: Q: ^: E
</tbody>
, O0 p0 b k- [2 } H" i </table> |
|
发表于 2008-1-21 20:52
|