|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间6 N, P; \0 Y W% x/ A2 W
<SCRIPT language=javascript >' R+ R- y6 t3 _
document.write(
% a v Z8 Q" ? h) O) b"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\! F" ~5 f4 i o0 B
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");. a+ v% [9 |0 K7 `7 i& q
: }+ y' G% ~, s5 v
function showtip(text) //显示链接的说明0 Y! \5 X: u+ m7 V7 D- o3 W, ~# X2 v
{& I% X9 Z7 w- M8 Z2 N3 j& Z
if (document.all&&document.readyState=="complete") //针对IE
6 I' q1 J* O( A4 ?5 y( r, C' n K {
1 t0 [ F. _( b+ |/ ~( O
3 {, u4 _+ n4 P( B- p; J document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";- h' u0 z2 G! K4 @6 X5 l7 j
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;- t( j5 ^4 c( W7 g2 ?* Y
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;5 f6 H" b' @; b0 ?
document.all.tooltip.style.visibility="visible";& u8 o t+ G! B; `5 g5 r
}
6 j1 T9 |2 S+ i" L: P( F}
' p4 e* y$ t7 G9 h! U" ]7 Q ]! ~/ B. c* g5 c5 n8 a1 H- Y5 T6 q
function hidetip()
: v: `9 A) g3 G, O2 b{
0 ]* Z# D' D9 O y' W* Gif (document.all)
8 p( f0 ]- N$ I2 W l* G# ? document.all.tooltip.style.visibility="hidden";4 D0 }9 C( e' w0 ?, Q& b/ e; P
}
( M( c1 j3 V, u; n$ C6 q( a+ h+ E7 D- A
function setcolor(fntcolor,bgcolor)
+ F: ?! R. W1 q& v{& k1 ~4 j6 Y8 F& [# O! Y
document.all.tooltip.style.bgcolor=bgcolor;4 r7 a/ ?) k6 `- R, ]
document.all.tooltip.innerHTML.Color = fntcolor;' j; ` b& K, I; E% o6 X
}* }: U0 d# l+ p
/ |- E0 b3 {! w
function showhint(text)
5 u( ^% | K: Z9 y z: R. q9 c. V{2 ^( o0 Z! f& q& q
onmousemove=showtip(text);
2 E6 Y, G; L" Z/ h+ `% O& ] onmouseover=showtip(text);9 D1 a5 J! t5 L8 w& Y
onmouseout=hidetip();/ m" @* O. C; |$ R
}
* L* \# k/ W( I/ n: z% a; s3 E6 r( L</SCRIPT>- s; t3 C6 F4 G. b0 ]
3 m2 V7 H4 S. o+ j9 G; B. @
0 X4 S; F' v8 a0 R$ K# A" t" L' u
( A1 v0 S" O9 R+ k. w: s+ Z
. w p8 N( a$ ~- @4 L$ T' Q8 W6 ?. R' L% L. Q
7 q9 ?9 ]& A1 H' I5 H7 q; v( _ y
二：将下面的代码复制到〈BODY〉区8 x4 \' x, G" A
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 . R# n0 {, q( m, {- f
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
- g/ J% r7 t6 e1 s- u, g, k4 j3 N <tbody>
4 F# _5 ~& B) `6 O <tr align="center" bgcolor="#ffdfd0">
9 d* v4 u( g0 P9 {8 ~" [, S1 V1 k <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
1 {; i. h' i4 o$ ]6 W target=_blank>赏心悦目</a></td>
$ N/ m2 w/ K4 x% `- U. ] <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" : w. e. f) C1 r
onMouseOut=hidetip()>网页素材</a></td>' Q# T, @) [ ~) D
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() 6 x z3 K7 a$ P1 \% z
target=_blank>图像处理</a></td>: `7 Q+ o$ M& E
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
" P) y! {1 b6 V' m& e target=_blank>网页特效</a></td>
$ {1 x! d. L# Q3 z. m </tr>4 M. Z- J0 I7 R* Y
</tbody> ) y3 N5 c8 u5 B! h
</table> |
|
发表于 2008-1-21 20:52
|