|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间% H. Z% a% P* }$ u$ q
<SCRIPT language=javascript >
8 ^# l* h- E9 O4 ]* o! qdocument.write(, Q" H1 x1 L2 Q- Y
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
9 g3 P+ P1 ?1 t;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
( A7 `' v* Z; K' W H E! }
! X' F; ]5 m1 t+ [0 a. c% Z3 d& s9 ^function showtip(text) //显示链接的说明
* g, z+ h) M0 U& |/ _3 z7 \{
/ v. S$ r6 F! [- T, ~ if (document.all&&document.readyState=="complete") //针对IE
6 u/ O! l4 o& N6 ^# r0 i {$ f8 {- a7 Z0 F" d: f* V7 e
: ]- y/ }+ ^, D0 E document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";: K% m8 y" B( ` G+ ?+ v
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
: x( T- T/ E: s: o0 I0 K; ` document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
0 G: G4 u0 [3 i9 H1 a* H* o document.all.tooltip.style.visibility="visible";5 T% m+ @7 T& d+ I L
}8 z( s; f4 Z% l: t* W* @$ @
}3 p' F7 G/ m9 U. J' U- ]* K/ [$ v8 s, w
9 c+ {5 g/ d# ~8 r7 |
function hidetip() ( F/ z* A1 W& W" i+ L. R9 ~
{- t) n5 k5 z- Z8 Y
if (document.all)) t5 W3 @2 C0 P
document.all.tooltip.style.visibility="hidden";( A6 e0 M1 W9 W. K5 \8 ?
}
1 z* Z3 ^6 @8 Y' S- a Q" @- r& m/ _8 j+ j4 Y
function setcolor(fntcolor,bgcolor)% @* L+ t0 P6 Z2 D8 Y" ?) M, Y
{
' ~- r5 l5 g3 e1 } u, j document.all.tooltip.style.bgcolor=bgcolor;- V1 ]2 m) K `( d/ r& l
document.all.tooltip.innerHTML.Color = fntcolor;( x% J/ k8 @5 i. N C) G3 O2 F
}
& S% t) J _2 w6 S: e+ s `, `0 Y6 }
function showhint(text)9 I. B% M6 f% E7 a, L, o# f
{
+ ~" q' Y3 c8 Z3 G z# H- m onmousemove=showtip(text);- [) }( `. U4 D. y/ T L8 s
onmouseover=showtip(text);
) M1 I" h& D7 j2 V) h8 u onmouseout=hidetip();
) f" W' L2 w) e/ E: [}
3 N1 l# w" X$ I" e</SCRIPT>7 R/ U* ^( |5 b m! [. P8 m5 o
9 |. r: ^1 b2 J' ~, G4 Y5 J
% t7 W: o; h) f& P! ?$ X
% f0 u7 C9 C; P; G. C1 K
- X T, G& T( O+ I! U A( Q( d5 I/ Q
5 V& j# X5 A" q- a9 v& ~% V5 L$ ~+ J( ~1 ^7 J0 z
二：将下面的代码复制到〈BODY〉区( A' U9 J, u) V- i& T% q
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 ! C! x0 b Z9 e
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">. T- T' q8 x' n, I4 O! X& C, N& a
<tbody>
6 D! Y* [7 O# j0 X& @ <tr align="center" bgcolor="#ffdfd0"> 3 }" C, M& S4 m6 m# p! e
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() / |' ?" v& a$ x3 n
target=_blank>赏心悦目</a></td>( `( e( P, Z$ ^7 Q0 z8 V- p5 B0 W
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
1 U- u5 b# M) ]6 o3 N onMouseOut=hidetip()>网页素材</a></td>, v) \* i( f) ~) \
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
# a2 i9 ?6 B* d8 j' w4 K+ u$ U2 B3 I target=_blank>图像处理</a></td>6 n; I0 p, c% z, z/ x, ^
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
' Y# P! o7 E0 T# V# O target=_blank>网页特效</a></td>- I: X0 a0 z( X/ }" ~7 Y
</tr>% ]9 O `8 @: w: k/ x
</tbody>
4 u) V% O- O9 |3 T; q& o; K# N </table> |
|
发表于 2008-1-21 20:52
|