|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
( Q4 @& ?% j# H5 O9 w/ K# p& k<SCRIPT language=javascript >( c9 l/ i7 ?' N8 M3 F
document.write(
! a, ]$ \# ~! J2 l. M8 g"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
O7 P( f4 ]1 s7 o! Y' D8 Z& R; x- T;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
! r3 v; V/ b# u+ y9 |3 `7 p O% J
. h5 S* y3 y1 o# t. ofunction showtip(text) //显示链接的说明% _8 |* @9 T6 S! [, }
{
- Q. ]/ z6 Q/ u6 r. ^" c; M/ D if (document.all&&document.readyState=="complete") //针对IE
1 _8 x! j" G& t {
0 o& Z- y5 ~' A% y4 [3 A, E" v/ v g# o% u6 \& E# o ?$ M5 p
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
& `1 P' N' |7 }8 S! d document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
: O7 T0 I5 u! o# `- b; k& p document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
3 s. B7 b' _! ?( d document.all.tooltip.style.visibility="visible";- r" t$ J+ E; _! R: y' M( y2 J0 ^; T
}
* v$ E, u: P% ?}
- `* M$ d. g$ X1 k9 I; B+ j* f, [8 @
function hidetip() + N# D3 Y7 b1 n
{
R# [' }1 S: Nif (document.all)
5 j+ W/ V4 L# V8 J7 I2 `/ ` document.all.tooltip.style.visibility="hidden";9 X( l" ~% I H" o( R. j! V
}
0 u O9 F" r( D2 u* g6 D9 |& I1 s1 B! A& X0 L+ B, T7 s- @, J0 l4 T
function setcolor(fntcolor,bgcolor)% Z* U0 {3 N3 g4 N' y
{/ \6 x" c* Z" I/ O! |. X1 E9 U3 u; C4 W
document.all.tooltip.style.bgcolor=bgcolor;- a( v$ a5 `) j6 F
document.all.tooltip.innerHTML.Color = fntcolor;
6 q5 T. n) F4 G4 v}
# X$ r' J, n* i5 N1 A: Z `1 Y4 Q- ]$ H5 ^0 o, V6 _
function showhint(text) ~! K* Z+ |* X' O, P
{) O2 R4 M' v) D" p& z
onmousemove=showtip(text);
q7 e* V8 \$ X: A onmouseover=showtip(text); T9 A' E9 b3 g4 x$ H
onmouseout=hidetip();
- o5 X+ N* G/ U}
% L6 f' P$ Z$ f* l</SCRIPT>* @7 D2 u0 t6 F' O4 n7 G
! h8 O3 i$ W: j" T2 `" U
5 }. ]6 o0 Q, K* }" e8 x! O, N* F0 p5 V* a+ Z/ N
. m2 S* \/ L/ Z2 e( u, P# q+ F
+ A- s: H8 P5 b! c3 R. c" [% U* p. M
) [5 o" O) }) m& L
二：将下面的代码复制到〈BODY〉区5 s$ F4 a3 E- }' x. m+ X
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 $ g! \4 y: f/ ?, }0 W, g" ^( B
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
1 B- |8 I& d* ?6 g! S: A <tbody>
+ G+ M! {7 M P$ f7 g' T <tr align="center" bgcolor="#ffdfd0"> * O+ v1 x8 x/ K2 }
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
( `" M8 f% z D5 A target=_blank>赏心悦目</a></td>
- Z1 P8 [ c2 O7 _- Z/ U <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" " L, E4 d8 t5 u! Z! @( {
onMouseOut=hidetip()>网页素材</a></td>, H& K: u5 g4 x" w6 d
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
% y; L+ U0 W! i. h; }% y target=_blank>图像处理</a></td>) Y" C2 d+ e2 j. J2 s/ X( z) q
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 3 v! E. @1 }$ I2 a6 j! R) P
target=_blank>网页特效</a></td>
4 v% C9 J6 X: k/ R7 h* _8 e: c </tr>9 q" r* I, ?6 N# E- j% Z* {
</tbody>
# m: e, l3 C3 }1 O8 U </table> |
|
发表于 2008-1-21 20:52
|