|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
. `% a5 K& \# S; X$ W2 }# T$ d+ ]<SCRIPT language=javascript >; ]5 Y/ W+ _1 S# J! q
document.write(8 m$ h& D4 M& t- o8 q; s
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\" t9 k$ X. W, _1 v3 x
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");" F& W, @$ z- d3 I2 B, s
& ~- J; H' F$ L6 ~7 w; |8 B( F
function showtip(text) //显示链接的说明% V: H! ?6 _8 ]; Z* O7 P1 I* A
{
/ M- Q& b- d0 _. Q/ f! S6 H3 J' E if (document.all&&document.readyState=="complete") //针对IE Q/ H. |" O) Z5 Q% L
{
% l2 ^, v5 M$ T, M+ V, b + o. V& t+ c0 ~
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";' ^0 H0 Y2 ]; f& x% S/ w; m1 k+ _6 x
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
3 |7 T5 ^# z1 t$ |: s5 i* s document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;) b% q1 B1 j( s6 T8 k! E! x4 J" ^
document.all.tooltip.style.visibility="visible";8 Z3 A2 n. b! ]' H
}
+ M' S k8 B+ k9 V3 j3 y1 h# f}
3 S! D+ G1 L+ K& P# z) q" t! q6 P) `/ ~ ~
function hidetip() ) {. I2 t J0 ^2 p) w, s4 y' Q: m: h
{
& e4 h! j% Y: o& K/ D. Yif (document.all)
! V8 j+ B3 k/ m+ c document.all.tooltip.style.visibility="hidden";
" [7 g' [/ K$ o1 ~7 k}
^0 D9 f! ]. {1 U4 ~9 r0 [6 e2 x! _1 j* @ {
function setcolor(fntcolor,bgcolor)
1 t v2 ~2 v, e* K{( {' C5 |, t* v* Y) O- t
document.all.tooltip.style.bgcolor=bgcolor;3 u3 j+ N$ w' j+ C5 v7 l7 E
document.all.tooltip.innerHTML.Color = fntcolor;8 I. R0 t. ?& P- \8 ]
}
. W3 L/ V' x- k/ E; Y3 J! H- Y' y# L7 i3 X$ d
function showhint(text)3 S6 V n! L9 a: K5 O3 s" h6 E
{" f' \0 s" d& q& [) h" n
onmousemove=showtip(text);
$ D6 Q' ~7 N3 q, C0 k& y onmouseover=showtip(text);
+ u& Q: C* K1 @4 x5 B" ?% T$ b onmouseout=hidetip();
! [ g# O0 U; l7 G}
& [" [7 D5 M7 F+ ]</SCRIPT>
6 G( ]) _) f- `6 W! ^7 j) D4 d; @9 D: O: J1 m
/ ], M# c n+ i3 [! \! X
: r5 Y6 F( }* n! P! l
+ p2 O/ I: I8 j
" a3 n0 _. l( Z I2 r# i8 U2 i8 ?1 e3 j* J! [! F1 _7 K; O2 F2 ?
二：将下面的代码复制到〈BODY〉区+ [+ L: O" j% }& F) L: e3 z
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 4 e3 Y4 d" S1 _! ^. C' q
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">+ ? a! C3 J1 d/ `# I; t7 [
<tbody>
6 E" B" b" R4 x9 G4 }3 i" ~ <tr align="center" bgcolor="#ffdfd0">
: a4 f2 B! M3 m2 C( y( Q <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() ' r8 F8 G" W: c0 g5 i6 J
target=_blank>赏心悦目</a></td>; J! S& A d) M f) R
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
& U' r8 M1 C$ q9 R5 o9 @ z onMouseOut=hidetip()>网页素材</a></td>; U q. a# x* }* v; D5 W" L
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() 7 W/ O: }+ H, Q$ m0 Y6 C6 o `
target=_blank>图像处理</a></td>
4 r0 C% {9 ~! t# Y1 T3 E1 R <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() ! s$ f; p! }, Y3 s) N
target=_blank>网页特效</a></td>
: T" g* X( Y. n0 `9 w </tr>
' r9 p( j4 s$ l2 r( y) B </tbody> $ u) Q* \+ D: Y4 u* z( C0 @
</table> |
|
发表于 2008-1-21 20:52
|