|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
; Q/ m$ |( Z+ A<SCRIPT language=javascript >1 T4 l) b a; }6 _
document.write(* }' ?! n7 G0 Z. C* j0 S
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\8 Z7 |8 k# m2 x2 |3 ^ I! ~' V
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");# ]: M2 y/ Z4 P$ Z3 I+ m
$ i+ d$ z4 G, [! X6 l$ mfunction showtip(text) //显示链接的说明
9 ^7 b; m- N N# w{
: c1 i( u4 |) m! `0 n: Q7 O& F if (document.all&&document.readyState=="complete") //针对IE
! C+ F4 k# u/ c# E- g {7 _- D0 B1 z& P; K5 }
$ `" Y, l# h( H0 z7 `- f9 ~
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";, g" ~1 `& D7 Y- S
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;! L9 Z9 G( t H! X$ N6 K6 |4 u
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
$ E5 r. U9 ?! T9 A( q document.all.tooltip.style.visibility="visible";$ p, M$ L! d+ @- k5 D' N9 Z+ \; K3 {
}6 F/ N. p. }6 B
}
2 v8 P0 ^/ {0 w1 c' c6 D' G3 q: Q$ N% Q
function hidetip()
/ D$ @% i6 ]5 E8 ]9 r* W. t# t# e! e{
8 ]5 K0 X) ]! Qif (document.all)
; ?3 P" N& b% k9 F, |5 d% w document.all.tooltip.style.visibility="hidden";
; {2 T3 L' n- c, ^, r: D} {) o; F, L. L2 b) D, d. G
8 `+ d& m2 d! p9 S7 w, z5 }
function setcolor(fntcolor,bgcolor), }+ r# D% P4 ?
{
/ U" @% d) _$ E; ] document.all.tooltip.style.bgcolor=bgcolor; |4 T; u4 v& {0 B }% u3 N
document.all.tooltip.innerHTML.Color = fntcolor;4 n% P2 b2 j& U
}' l$ g# r3 B2 }) Q/ v$ Q
- R& E, X3 B0 Lfunction showhint(text)
; I( J5 o! m$ o{
2 u( l* U) q" C2 H onmousemove=showtip(text);
6 R3 F% B" z8 i% E& y onmouseover=showtip(text);
% l& G2 H+ {/ L0 L7 Y onmouseout=hidetip();
. c# e1 G3 C8 [6 X% B: V; {: d6 u4 m}/ a* B6 f) {0 a* o$ H* w6 B
</SCRIPT>) H6 S$ {6 h! w" |' B- j8 J! T) e
7 L( I4 W/ v7 w( z2 h; k3 F1 i3 m5 x: ]0 M! k6 |( M; i9 T
8 t6 h H4 H" m6 M$ N4 \' u0 J
) L. D3 w7 N, ~9 Q0 G
9 x" D6 ]: H& ]% D; L8 \6 V- {2 z; m
二：将下面的代码复制到〈BODY〉区
# f2 g) J0 [( \<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
" [5 _* Z: Y6 f' t; v8 `cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
9 p5 h* X$ s0 ]! {3 [) ^" z <tbody> j; z" t6 N, V: u; F7 x! L$ b
<tr align="center" bgcolor="#ffdfd0"> ; ^) e* f' C5 E% P4 `! N6 t$ b D u
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
" }. v: x+ B2 p target=_blank>赏心悦目</a></td> b+ Q3 r& e& l
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" 2 }1 [: [; F. N% T# F, Y
onMouseOut=hidetip()>网页素材</a></td>
: s2 E( z8 H2 S: f1 Y# } <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() 5 A5 G2 A. ^3 c8 w! a
target=_blank>图像处理</a></td>
5 q6 [2 R g) K7 X, y <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() ; ?1 r, o P- n+ n2 K
target=_blank>网页特效</a></td>
, w2 j- d1 ^+ s' U' D! }/ ] </tr>
0 X" G, T; @/ V# A" k& X R+ Y </tbody>
# F: L5 @; ^" V% L </table> |
|
发表于 2008-1-21 20:52
|