|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
' y5 f& _* X+ g3 K$ q<SCRIPT language=javascript >- \5 ^9 R" x3 ^8 I# _* W# P
document.write($ Y7 @% G# e4 j4 b; G0 Y
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\" g* Y% B( W% A5 h7 K1 ]7 G5 Y
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
# L: n. C) C3 h2 r! E) Y
% V0 y; h" N* O, h4 z6 Dfunction showtip(text) //显示链接的说明
" |$ N/ r+ g1 R8 L8 n{
) f5 c3 y5 j8 d6 V if (document.all&&document.readyState=="complete") //针对IE
4 _( h" n* g: |1 [: h8 g# a' e {
2 d2 m% f5 |2 E! e3 I
+ h+ E$ F9 \ X ]; M) I document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";8 `0 P. @0 B2 [+ x7 T! E
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
1 r2 y* d; K3 V2 S6 A document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;2 v/ K0 C8 ]- p4 J
document.all.tooltip.style.visibility="visible";
! t: m+ }! {; K% J R4 r) ?! i* | } w" v' j3 |: b& h
}6 R5 j5 D( d i* i
k" A. Q3 t- k/ i" n- l
function hidetip() 2 Z5 B% P0 s6 j4 u5 G; G( M `" N
{
4 Y8 |+ L2 k! S: l) Kif (document.all)
0 Z8 z+ P* ^9 L0 F& P4 M& L document.all.tooltip.style.visibility="hidden";. d% |& y0 A9 Q! M9 Z
}* H4 D6 e% i/ Y! o$ {; F
8 T/ q8 u# k" {% ]4 e6 v: r$ D( b8 F2 [
function setcolor(fntcolor,bgcolor)
; d) P/ q6 H, V I# Q" Y{
& f- }4 Z& [ V$ `* k document.all.tooltip.style.bgcolor=bgcolor;" M" A- I0 d# s5 o
document.all.tooltip.innerHTML.Color = fntcolor;6 \3 N4 j# A2 ~/ l- \" P" `
}
& V( a4 ~% B/ B1 S" R( v% v% h1 G+ |) q
function showhint(text)& s6 ^; t! E% J' m% H
{1 Z7 V4 \2 D6 D) j7 D% B
onmousemove=showtip(text);6 N3 W: @. O9 V6 [
onmouseover=showtip(text);
2 S2 K4 O7 r7 ?. o% r onmouseout=hidetip();
. c5 \4 L# n: a( P}
7 v& n* d$ `. I6 q% A- w$ |/ P</SCRIPT>
: w+ ^2 T. M* P/ s- c [4 }1 x( L! S, n }
+ a8 o3 [" S6 Z, C2 Z" y- P9 i3 W8 \6 \' {4 B
" A+ @' `, {: c! F% j7 v: b7 U+ Q
( K4 V% {3 u+ z% h1 [( y! W: C U( _! E& H9 U X
二：将下面的代码复制到〈BODY〉区4 d( ?+ P/ d! V3 U! ]8 y* W
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 6 \7 k# S! O6 H3 u) T+ t
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
0 o/ h. L' p* l& \! d) E g <tbody>
S: ^+ m- l, V5 P/ d# M <tr align="center" bgcolor="#ffdfd0"> & A7 U5 L. E, z, V" O
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() * s2 J/ k0 `" D ~& ^# Z" s
target=_blank>赏心悦目</a></td>6 m; h K* `7 z
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" # k' W% F! P7 q5 L
onMouseOut=hidetip()>网页素材</a></td>) V6 Q+ g) a" D7 Y, r: \
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
7 H8 S5 J" ` t( Y& o target=_blank>图像处理</a></td>
+ @6 i# o& V1 _7 V, s <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
6 @' f0 ~+ Q' }7 n0 T target=_blank>网页特效</a></td>% R6 y5 I7 \6 ^
</tr>
! w* Z0 O# P6 R5 b) Y7 f; J </tbody> ) v( m0 ~) C1 c- M8 I
</table> |
|
发表于 2008-1-21 20:52
|