|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
; B0 G# _9 Q4 }5 k% Y<SCRIPT language=javascript >
) n6 F5 d" Z: S% z. G: t/ Odocument.write(
* j z; Y6 {8 t( ^5 @$ S"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
6 l0 U# K9 y1 R) K5 n4 t;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
# s; {: L+ \( p' h2 b, ^
2 K. `! q6 L" H$ i+ B% {+ w, dfunction showtip(text) //显示链接的说明
; q2 v0 O* ]! P6 }& Q{
; Q f* X" \& M9 y# E/ x if (document.all&&document.readyState=="complete") //针对IE6 k z0 I' Z1 H: N3 T
{/ Q( z2 N. H# N* n& V
5 C) u+ \% S! @0 E
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
8 i( E$ o: ?7 E- }5 b document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
. M( {3 L# s6 g8 m$ I# p) W document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
1 i' ?3 m6 s# t) [& k- c2 }8 q document.all.tooltip.style.visibility="visible";- H1 A% ]. y% q# B
}
0 R6 q- V/ [! o* C}# W3 @9 l" \6 A$ s$ l. J( s
- [7 S# f& w" b& L
function hidetip() g6 G, P9 p3 L
{* x0 }5 S; R; a7 D/ t
if (document.all)) r9 N. D, f8 Y/ Z+ r+ @5 k9 ^7 y
document.all.tooltip.style.visibility="hidden";7 k' @0 v" a) x+ U5 T. g, A9 Q* I
}. |0 @' A0 ^5 p* J' X5 B
) j: @% E. l- N7 K/ gfunction setcolor(fntcolor,bgcolor)
5 _& V6 M7 q: S7 y+ `. d7 M{1 ~. s4 n( |% a* A- E0 x
document.all.tooltip.style.bgcolor=bgcolor;& e' G# Z2 p- q$ }
document.all.tooltip.innerHTML.Color = fntcolor;
) {" I O- ]2 M5 y8 q8 T}& M8 i6 f7 J# c4 u8 R, C6 \
: e* m4 B/ H' w4 B/ ]. S1 B* lfunction showhint(text)
5 W: x8 ?/ C$ _% ^: C z0 F1 ~+ O{
4 _" A1 l* [% S3 C' b- y onmousemove=showtip(text);
& D6 p9 h' L$ ^# a onmouseover=showtip(text);- Y& g8 h# S+ k+ k8 u" V
onmouseout=hidetip();- {! [3 S' T6 P8 k4 @% ]2 f* B, K. b
}2 H4 V# s4 v8 K9 [9 Q
</SCRIPT>
/ o5 U9 g/ ~4 F! ^/ i* H3 y- N6 f0 C8 {1 |# U
4 ~1 v. f) H# g
& O3 h# k' U' H5 R( L
0 k& d/ s* K3 w5 P
5 T. C, E D5 r. `* K) Z# b# t1 p" i6 R0 f. p3 @5 s) n1 d
二：将下面的代码复制到〈BODY〉区, g% N' S. J! F* n1 c
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 8 J0 T4 m" h6 W$ ^$ }. W
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">! W+ @0 r5 l7 |- n5 M/ l3 C( Y
<tbody>
8 }6 x! o5 v M9 t. u; b <tr align="center" bgcolor="#ffdfd0"> 8 S7 x- Q/ d9 w- F( k8 l
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() ( A( d- [( H$ L- B& [
target=_blank>赏心悦目</a></td>( h) D0 {( e. ~- i+ q4 B4 Q' J
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
2 I, g7 V, x. y onMouseOut=hidetip()>网页素材</a></td>( K D+ R _3 F# `
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() $ z3 S# j/ H1 n0 Z6 p
target=_blank>图像处理</a></td>
% c6 x* x* Y/ B2 x <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
& |: {9 w" x3 H/ N target=_blank>网页特效</a></td>
( ?# i$ c3 h& ?% ^7 D. J8 Z </tr>" E6 T% R: n$ j+ A
</tbody> ! i, \# b% x& _, l7 }7 ~6 R- o; u T
</table> |
|
发表于 2008-1-21 20:52
|