|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
& V6 t x4 V0 x9 P& h<SCRIPT language=javascript >
1 C8 _! Q% j! k) T8 Udocument.write(
( s: E4 e `# n$ i J% h) q9 I; T"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
f( Y, Q) j; p+ o0 T, d/ \;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");! B8 p" x" T7 e# r$ E, {( p
+ x9 v6 \# j6 X+ j3 G5 }7 f. Q$ s! e _function showtip(text) //显示链接的说明7 f6 n1 Q; y5 i6 V+ h" g
{
1 Y. a5 s8 y& H! R A if (document.all&&document.readyState=="complete") //针对IE
- y7 g4 K Q" r. F) V {
# g5 K O7 B* p# M$ w4 L1 ^ . n9 n& W! k+ G8 J7 p/ |" @% H$ _
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";. D8 P& R8 J8 \& n' O2 S
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;4 Y8 @* ?7 [6 J( Y( ^ F
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;# V8 [9 w. y; c+ l/ K8 T; V) c
document.all.tooltip.style.visibility="visible";
. p8 Q# m& h( M {( g }
/ u# D1 H: h7 n/ Y7 b. d}
* W9 B$ V* a' b8 f. y' n- o
$ |+ y) @2 Z% I- gfunction hidetip() ( }% V% f# k$ Z
{- i# Y& o# u. o9 M$ ]
if (document.all)+ z) O4 H9 m( Y
document.all.tooltip.style.visibility="hidden";
- r: U- T: F4 U' `, ~# I. a}" }2 [+ n! V# n- {! {3 K
# l c( W; J; \# i; t. dfunction setcolor(fntcolor,bgcolor)% S: @- t8 f! E4 c4 [" v
{
# q6 E5 Z6 i5 h$ F, {0 A# v: n+ ` ` document.all.tooltip.style.bgcolor=bgcolor;/ j& p2 o5 |7 _1 F
document.all.tooltip.innerHTML.Color = fntcolor;$ g" Q- ]! {2 f) X! n& s% O
}
1 d1 {8 {% E- f. e; ^6 C( i( T) {
7 N$ Q; b& R+ ^' A! ffunction showhint(text) U1 k' ]) d; N8 R2 g; E+ G
{
. A1 z5 M9 X4 t7 U onmousemove=showtip(text);
P4 g6 L8 x6 a$ p) b onmouseover=showtip(text);' h7 J" @" ^( v9 o9 C. e
onmouseout=hidetip();8 r, l# H8 S; [8 `
}
! D4 T: G C0 Z" b. \$ y/ y, M</SCRIPT>3 ` o$ V: h' i% P4 i1 X
+ V) f4 K- r+ u6 A) m9 g# G
- D/ R% N" A" R F1 p
. S, f$ c- J: j% [# V
4 e- A3 ^" X% R# H0 t! a/ ?5 j" r; D' `$ P! C" K7 }& V1 a8 e
+ |) _: ]; m5 X" y9 c7 f二：将下面的代码复制到〈BODY〉区6 B3 O$ B; U0 D/ a
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 ; h5 n4 \( u1 S5 I, L2 U* \) `
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
( o/ n7 \( d6 z% i <tbody>
3 e, o- t& X8 d: W <tr align="center" bgcolor="#ffdfd0">
9 g6 ~0 J/ x7 B <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
' O1 K* r3 I2 M; [0 U0 X target=_blank>赏心悦目</a></td>. x1 h0 T Y8 r0 S! \ L
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" , S- }4 {" e) l4 \; v# O
onMouseOut=hidetip()>网页素材</a></td>
' j& `. \8 U/ v) L) @5 O6 X6 I <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() 6 f3 T" J, h/ j0 X5 O* R/ C% \
target=_blank>图像处理</a></td>
; J* N M/ g* x! G9 s( ^1 z+ ~ <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 8 C8 h$ m9 p8 p9 `
target=_blank>网页特效</a></td>
/ e& M, J9 M( u6 ?: N </tr>
8 |" d! d) P) s& U' C* o6 A </tbody> : r$ I# W( v" j6 p2 F: {
</table> |
|
发表于 2008-1-21 20:52
|