|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
) J% ?7 V, Z% |% a2 Z<SCRIPT language=javascript >
/ K$ Y: n3 A, V$ [, t: e$ odocument.write(
$ T- z/ h8 S7 V! u"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\) b T+ p" F( E9 j3 X
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");+ X; n1 J9 }9 Q+ G" }+ \" d9 {
2 h, S$ P2 D2 J# s- |4 F2 C
function showtip(text) //显示链接的说明
' W: P& N& N* K{
6 U# ?9 ?7 P3 K0 L9 `, J# g if (document.all&&document.readyState=="complete") //针对IE
3 x6 M; P5 y. g {9 D3 n% B. ^" O
$ Y% Y' ]# {5 W) x0 M/ a
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
+ h# I+ R- U& n n+ f document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;/ |" h! `! n& i* y! C% f- k
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;4 g ]) V. l1 L& n3 @1 A
document.all.tooltip.style.visibility="visible";- l' v0 M- _5 y3 \, T
}
( Y# V4 f/ Q( f! u) j8 B) ]; n}
; j4 b4 q U+ F8 P8 ], [ Y6 {' w6 r7 m. j, f5 m* R
function hidetip() + Y! j% b9 L: l! H( v, P7 J% [
{
* {+ R8 U" X: ~" }if (document.all)! c! s# h+ R. i, ?# {+ b% X
document.all.tooltip.style.visibility="hidden"; b- k# }1 t3 o
}
- g6 S. R$ S0 K* L' r% V
3 A7 \+ y: V0 D% Y% Yfunction setcolor(fntcolor,bgcolor)
2 g: i) ^% V+ Y" k# v1 k{2 z; f8 g1 Q7 x3 l# Q! F
document.all.tooltip.style.bgcolor=bgcolor;% M: ?4 |& g1 }& ]/ l8 o* f+ {9 J$ D
document.all.tooltip.innerHTML.Color = fntcolor;. S6 q/ B- k! T3 H) m {/ Z
}2 c5 v* v( u) u W7 |% W
, U' h% T/ o, T5 ?; x
function showhint(text)
7 n6 ~4 b7 m. t+ p: s{
: o$ r/ V8 [$ O' K$ x2 J& _ onmousemove=showtip(text);5 o! ]* c7 V' S! f/ u3 h
onmouseover=showtip(text);/ G0 t7 ^+ G: H- J
onmouseout=hidetip();
1 C ?! Q, y( m y! s o}8 i+ R( H& z& T' t4 p, M
</SCRIPT>
5 @! x/ K8 n* X
* H5 x/ ]2 {: l. q: D' a
, L/ A0 ?1 Y R0 H) v: p& L) V" v& V; E6 f8 M9 i6 R! C# P
% Y( T( o- n4 [7 h
$ f8 b) }+ v0 h7 E5 Z; d! E7 H7 T$ o
二：将下面的代码复制到〈BODY〉区' U \, l( x. z
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
0 A4 C6 k- @& ]; k' \! g! ycellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">6 [- E5 ~ w2 k3 q# y) E
<tbody>
0 w5 p' I- @& R2 G <tr align="center" bgcolor="#ffdfd0">
0 Z$ R- w0 f5 D7 P <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() ) s. N; y* H6 V; J8 G5 S; |
target=_blank>赏心悦目</a></td>
7 n. ^3 V" ]) d <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" % q! S% e1 W" P' `8 O
onMouseOut=hidetip()>网页素材</a></td>3 d* ?6 Q, P2 T
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
2 J2 v F$ D! D* w$ ?* j target=_blank>图像处理</a></td>
+ r" R* P8 a% u3 l- P <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() % M2 Q+ s$ ]6 F$ b+ u4 L4 L
target=_blank>网页特效</a></td>! h5 s9 q1 n8 @ J/ r* W5 L8 \
</tr>
6 t# }/ ^; l6 b, V: q </tbody>
5 u; S, q; I( w8 e; M </table> |
|
发表于 2008-1-21 20:52
|