|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间( E, v' w. P0 _. v
<SCRIPT language=javascript >, W- W9 { k* s4 [, p
document.write(9 H# ]; }9 x) i6 u0 S9 H
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\5 b, |4 b: @9 L( k
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
6 J9 K- y$ ]) y" L
0 w+ _4 w- N0 S" B6 O( W5 b7 qfunction showtip(text) //显示链接的说明% M0 ?$ R7 C ^& X1 w
{
0 A" P2 S" G1 Q: U) W if (document.all&&document.readyState=="complete") //针对IE/ b) i: R" Y2 u0 t1 o
{
) x: C; m4 G& m* e$ y
0 c# n# a$ c2 t/ ^3 j7 ~ document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";% l. z0 ]- c' ^& V% X. J4 F
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
: {( k1 _# f V0 J3 p document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;; S1 a. `3 P: t) H0 a( `4 B
document.all.tooltip.style.visibility="visible";. `7 W1 z) D$ F: z' l) e
} Y: }4 r& V* V" R8 q6 l& y3 o! p/ ? d
}
& k+ S, o" C* \% z
" X& j- |; p( J& e; j* sfunction hidetip()
, f! c9 s* I( x{: I H( p9 C- V' M4 x3 k. k
if (document.all)
5 z& J. R: b* i% _ document.all.tooltip.style.visibility="hidden";
5 R! S: [+ Q$ k9 g}- u3 E: V1 J+ y
8 w7 Z* j; X7 c" ~9 ~7 ?function setcolor(fntcolor,bgcolor)( F7 O3 f) |/ { I9 d- ~3 f' }
{
5 C+ D9 L" F0 }1 m) a9 I$ \ document.all.tooltip.style.bgcolor=bgcolor;5 _1 R% l/ V* p' a5 }% I, j4 i! l
document.all.tooltip.innerHTML.Color = fntcolor;
0 {$ h) v* v4 ^# Q) Q% m}
c( N) @3 i U6 v( A
- f2 i5 z0 _ {function showhint(text)! `; c, v% N0 [0 X
{
0 C. Q4 U2 ]- ` y, b$ `" f, `* p$ s onmousemove=showtip(text);
: M/ |, v( B8 T+ U6 E3 z onmouseover=showtip(text);
4 y6 r$ ~3 Y, C! R; E& ] onmouseout=hidetip();4 F! ~) {! C5 k
}- ?% A+ K, L+ b" n1 w; u' A1 x
</SCRIPT>
! P5 L0 o/ s( Q3 A8 j* l2 H% A o/ f9 v2 X
8 M# I% V7 s% k* P+ o* O* {! D' Z* l" I% B
; U5 Y% n. e% i
! K! J$ m; R' [' d+ E4 J' P
' B0 i$ m2 w$ v6 I: u6 e- Y
二：将下面的代码复制到〈BODY〉区
0 d/ |* k7 W0 v' h<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
, \+ l* u7 W% x+ [ ecellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
6 A' D9 o1 V5 M& f5 ` <tbody>
3 Z5 u% W/ x( S0 W3 P0 p& o <tr align="center" bgcolor="#ffdfd0">
! x" {" v8 @% @; i, C, V <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
`. f& k* O% N [8 ~ target=_blank>赏心悦目</a></td>5 Y) F2 o; ]9 C; H+ U3 ?* M( r) Y
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
. K% B4 `. @8 C7 `, e$ P onMouseOut=hidetip()>网页素材</a></td>
& S1 \2 J4 f& x" A <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
7 x0 V) D+ A5 I H U target=_blank>图像处理</a></td>
) d, ~" X1 U* B$ Y! y <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 6 L1 y# R7 S" S1 J `/ O( a
target=_blank>网页特效</a></td>
( s n( p6 R" ]' ^ </tr>
) P' _# a: [2 b9 t) G </tbody> 3 I! T) S4 c. i- B, y8 |
</table> |
|
发表于 2008-1-21 20:52
|