|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间6 O& y. z: s: W) ~4 S
<SCRIPT language=javascript >
9 j* z/ ]1 s( Y8 V; Qdocument.write(/ l4 p) s: V5 a6 N1 J
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\+ c& |7 B/ [: O! i" N" c
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");' ?' v2 L' a/ K ^4 v' u
4 C$ k* U- [/ a8 x" p9 ]9 I Zfunction showtip(text) //显示链接的说明6 P" I1 Y ?* k$ X! n0 I
{
( `, N4 o. j* t2 `0 G3 o if (document.all&&document.readyState=="complete") //针对IE6 W7 m _) R0 D% H! j5 D3 ~
{4 N1 `. B" w2 K2 _" _9 H) C
/ b2 O0 r- z' V! H
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";5 h. e# b7 g# O( D% [
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
$ P1 C7 ^. e6 P$ [% ^/ d7 { document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
* X6 d7 w0 K) q document.all.tooltip.style.visibility="visible";& k' L: Y" O- o( [/ }2 s
}
4 x1 @# Z! {; F' z$ ~& p2 _1 a}* P7 ]- Z8 q6 M& `; j* r
' M {" G( c/ J- E- j+ _
function hidetip()
Z/ `1 v' z- H8 o% r h1 ?2 h{/ N' q. X! C& v$ R
if (document.all)
* c2 H! b0 a+ k" ~. t, n, n document.all.tooltip.style.visibility="hidden";
/ s' e, ~$ ]3 [7 P8 o. ~ {2 b}$ T3 E- q* w, \; l& z
* N; K2 }' I2 x2 K1 Z
function setcolor(fntcolor,bgcolor)# Y }# s" F n3 r
{ \8 F$ U+ e2 m. e- J9 i
document.all.tooltip.style.bgcolor=bgcolor;
6 [ \2 P4 }! n) Y1 m0 z document.all.tooltip.innerHTML.Color = fntcolor;, f2 b; V: R; {
}& q- J& y7 ?2 E6 ?1 U- r2 z' J
. I. x, _7 C3 Lfunction showhint(text)# H7 j- [5 v6 |
{! {1 d5 \7 o: d0 V; n
onmousemove=showtip(text);
- l+ X5 U' H+ Z5 a }) W) G onmouseover=showtip(text);6 u3 d L/ }0 R8 n- o
onmouseout=hidetip();
3 t8 j4 w) N. @0 R0 Q: s}2 V2 A8 w0 n, J( x7 J/ U) H
</SCRIPT>
' N# M* t" _/ |7 C' P
0 v5 o9 h. h3 u% R% F6 p! t( a) l7 ^* \
! ~: c9 N( d4 b' _9 i! t
% S [$ x4 m2 X5 S. v% {8 S' z+ Z2 h3 l
- G- v& Y7 _7 u# _ q. g1 y/ R0 l/ ]9 D+ U0 F
二：将下面的代码复制到〈BODY〉区
! ~# ~8 \6 h. G<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 0 p, p9 p) P9 F, \5 `2 M
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">+ E, F2 I5 T3 E4 ~9 s( ~& o
<tbody> 9 }# A/ K9 }$ t. Y R% U) q+ `% O0 S
<tr align="center" bgcolor="#ffdfd0"> , `- }0 W8 N) s
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
8 T" ?: U8 J% d, c; b target=_blank>赏心悦目</a></td>6 u8 E6 T2 Y8 \: O, s3 J2 D9 w
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
& b1 I6 r k- q6 K onMouseOut=hidetip()>网页素材</a></td>
0 q; M5 i1 M( w/ G, C2 ~ <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() / o$ c8 A$ I7 Q' b; a# O# a
target=_blank>图像处理</a></td>
$ T# ?7 q4 M3 a <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() $ J1 r5 ~2 g4 }' F! c+ k
target=_blank>网页特效</a></td>
* H/ m3 A( T% T# {; p& P3 o </tr>% w& k( u z- s$ C( ~
</tbody>
6 `2 ^" c e V% c( n \ </table> |
|
发表于 2008-1-21 20:52
|