|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间3 s5 H4 w. O* h
<SCRIPT language=javascript >2 z8 F6 O. Q2 V: P
document.write(3 J1 @8 \) J' S2 ]
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
! O4 }/ G, w( H! b! g d;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>"); l4 l% f2 s2 q V/ d% a
0 Y5 W a; b/ ~9 p2 a! K3 R
function showtip(text) //显示链接的说明
& K( V9 V% ~( f{
, `7 O8 Y: E9 W2 m$ n2 m if (document.all&&document.readyState=="complete") //针对IE8 u3 ]/ a# C' v, S/ _3 j
{
! A8 i: W/ q6 v& K: G4 e
0 M1 e3 H, z% D, l5 B. M document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
7 E- z+ W- z1 |( A$ d document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;/ x U7 C% Q. y2 {
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;: r# b- _9 a. G! s. {1 `
document.all.tooltip.style.visibility="visible";
) d S% @, X' r3 t- I' A, K4 P5 d; W }# l/ L9 @ H9 d5 J( x
}5 |- N' @: u: h8 M1 X5 U4 m( v5 u
) w& f5 H0 M0 u6 Y+ r) T* c$ ^: Efunction hidetip() & K- Y9 {5 @4 q, \& k0 @
{8 h, S2 V3 B4 _/ S& A
if (document.all)! G. M3 x: p- f# Q2 E j8 f
document.all.tooltip.style.visibility="hidden";8 k7 F" H% Z* o4 ~9 z
}
7 V* E( X: T) z6 | m
8 ~4 M" w( e- }# Q. s% j: t$ g3 z1 dfunction setcolor(fntcolor,bgcolor)) M Y6 i" J$ n% W
{( z2 S% w1 B4 E9 i, e
document.all.tooltip.style.bgcolor=bgcolor;( |/ N4 _" g! e. R% V
document.all.tooltip.innerHTML.Color = fntcolor; J- v0 \2 J* X7 u( h: S5 p+ e
}
9 y2 E8 m C: c5 r8 o
9 q' D1 k( _/ L& A0 L0 hfunction showhint(text)
4 y* y9 u# C. t0 ^# I{
+ Q- [ B! _" Z* \* ^- J7 ?8 ~ onmousemove=showtip(text);
5 j$ G1 ^% m2 u: n" w onmouseover=showtip(text);
- \, o3 V5 q* t onmouseout=hidetip();3 q1 U" I, G+ B ^$ p
}6 ]( {- E) V' s' m$ ` ~+ R
</SCRIPT>
4 E. V# D7 Q# K% B$ R: p0 G3 o( Y+ \3 L, i: R7 j0 p5 d/ |
h# R: \, T' @' `4 R; c- m
5 [: v+ u5 t( H0 a
" G' @5 j$ k. d: ?5 ]0 p/ o
3 g1 [" c0 ]# `* ?. ]* i
* I+ c F7 s& E8 ^二：将下面的代码复制到〈BODY〉区
, T: ]/ b, a. V) a: h' B8 k<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
, c3 A' b& Z1 a3 N7 O! gcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
! ^( s5 a8 K/ Z# f( e# i4 \ <tbody> / N9 B! i! P4 `
<tr align="center" bgcolor="#ffdfd0">
# w4 O0 w( T5 ~0 _' I* j8 q <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
& W$ r; `) Z4 Q5 }( ] target=_blank>赏心悦目</a></td>
, ?2 {! [7 U, K0 k <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
! M$ v% @5 m5 d2 q4 d6 G& @0 x4 I onMouseOut=hidetip()>网页素材</a></td>
- B6 \0 Y6 q. f+ E <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
/ f. E$ T% ~2 W" |9 a/ D target=_blank>图像处理</a></td>- H& J' Z* G* t: `6 p
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
5 }) J, I$ s+ l, P( e target=_blank>网页特效</a></td>1 O! ]( H4 H' v
</tr>
! }5 ~: w; o/ Q& K) Y </tbody>
/ l2 e: f2 K& X8 ~* m8 \ </table> |
|
发表于 2008-1-21 20:52
|