|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间3 E- z/ f+ F, C1 p
<SCRIPT language=javascript >
' f$ C }/ i* O; K; F% Adocument.write(
! @, h% b( e% }. C) p"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\$ H/ T8 s" c4 D$ F
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
0 A" s! X7 a# d5 P& W- A$ p6 B* L
function showtip(text) //显示链接的说明
" o) A) x& f1 s{+ }7 l$ Y9 r" p9 F' A# b1 x( h. n; \7 F; |
if (document.all&&document.readyState=="complete") //针对IE
% X5 Q1 u) y$ W/ Q; b {
5 m9 P. p) T: S/ r: o % h- I: P2 x" t: F" f$ N
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
4 J j) ^$ |) g' P, p2 a3 n0 i3 J document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;* S6 l" X* Q( z9 p, E, a
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
3 V) S* L5 K# [8 @ document.all.tooltip.style.visibility="visible";8 b# l; s0 R4 b
}4 o$ d$ S* t) N! g0 s
}
/ V! z+ \; J9 L; }. t
% Q# r6 C( s3 [5 Dfunction hidetip()
, Q D0 \ b4 q; i: C9 M0 E{" r/ L6 J- P; |' z3 g7 s( q
if (document.all)
5 y4 h3 m8 T; a, r1 W7 D2 l/ u document.all.tooltip.style.visibility="hidden";
/ U4 y* H; _: y& w n; x0 m}! f& v& `$ Z, U, L8 A$ e3 ^+ D
) o% n4 i! l* n/ h' j! ufunction setcolor(fntcolor,bgcolor)5 v* ~1 F" \8 K. S. _) o# {/ |
{, C7 M6 a) T) J, c+ w8 }) T1 v/ i9 I
document.all.tooltip.style.bgcolor=bgcolor;
+ {3 G, h7 m8 o document.all.tooltip.innerHTML.Color = fntcolor;
0 i. G2 H$ z7 R, b}
, y& l8 z! h M0 C
- B! _ z5 D# C7 t7 W0 k; [$ }function showhint(text)
6 J- j0 P2 N* [ J. Y{) b1 ^8 a# a& V6 ^; c/ M% {7 z9 c8 Q, q
onmousemove=showtip(text);# I6 w/ M# n- X! S+ H3 z- V4 @
onmouseover=showtip(text);5 b i1 e3 s. b& E
onmouseout=hidetip();: _/ m' w7 J x+ d; s2 E. a
}
% `, f1 F2 x# o; s, z</SCRIPT>
9 e; `3 n: l; i- H& ]7 k2 V
2 t1 D! W; r) @8 Z( F8 n
% @5 I4 |+ q) E; k9 D4 P& s0 ?8 C/ x2 e; U/ X( l
, J. b+ _: k; v/ B! C. l# \% r% V0 u3 j; Z' m" x* \$ f. u
$ V- {0 j C/ j) |' {7 \& O5 N3 Q二：将下面的代码复制到〈BODY〉区3 f/ L. V+ n7 m) C; n
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
# `2 E' P2 | C9 B& [" Jcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
" |; Q' M( `- Q! a9 o4 E <tbody> . i( ]% j( e+ [) U3 k1 T
<tr align="center" bgcolor="#ffdfd0">
, b& h) p9 v. U <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() 0 t4 R5 `6 W. R# y+ W5 @& {
target=_blank>赏心悦目</a></td>3 |: |5 ?# w6 p. W/ Q
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
3 K! [ c9 D5 b$ e onMouseOut=hidetip()>网页素材</a></td>
2 }0 i/ j- ?3 t9 N; U! I <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() 6 W2 V, y8 m4 p# j, H4 s
target=_blank>图像处理</a></td># `% e1 d$ `% M" d" r9 L3 B2 G, k
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() ) P; y7 k+ T2 l. A7 d
target=_blank>网页特效</a></td>! Y/ K# I! V3 G3 d" M
</tr>
% ~. h' Y5 N9 i </tbody> 1 ~+ |; ^3 J" L9 f x: v% l9 ]4 o
</table> |
|
发表于 2008-1-21 20:52
|