标题:
网页之带注释的表格菜单特效
[打印本页]
作者:
zw2004
时间:
2008-1-21 20:52
标题:
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
6 f/ u( @" s$ @6 p0 R" K% @
<SCRIPT language=javascript >
8 J# `: S# B, B, p
document.write(
' \# Z+ `' J; H, b/ f5 s$ ~
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
9 Y: h% b: _$ r3 U& o. v8 E# ~, m# H
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
5 q6 `( H; m8 @3 z+ q
( {( y% x! }5 j @) U, a
function showtip(text) //显示链接的说明
8 ]" O/ ]( `9 U( z! z4 `; K1 R
{
c3 T+ D$ O) l9 [- Z, K( e
if (document.all&&document.readyState=="complete") //针对IE
, Z* E% V: q5 D2 W/ f( [3 y
{
* O% D) `! e/ h# @" t0 P! w) ~
- ~) S) w: d: X1 ]: K
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
/ n/ G/ f, ]/ t6 e
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
H+ D u: n" W) E g) G8 N8 ?
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
& u+ x7 ]9 S8 F5 ]
document.all.tooltip.style.visibility="visible";
! H1 i. a$ |- e: a1 o4 H ?
}
5 T/ m3 p) A+ A* F9 d
}
3 C8 ]5 t3 j+ T' T. l/ T: A$ B
" O, `; v1 l; {' [5 O( l
function hidetip()
* |" O& T2 I9 R7 ^- I9 ~
{
1 c" v- n+ C( l" Z# q6 j
if (document.all)
( Y/ J) ?6 Q- s' _$ Q( J
document.all.tooltip.style.visibility="hidden";
9 K" m+ b) g5 R# s3 \1 ~6 @
}
# f5 |( v0 v5 L* k0 Z5 m
7 `, E4 ^8 V* H. V. _/ G4 T9 A: b
function setcolor(fntcolor,bgcolor)
, R" S8 y, }9 t$ I, P! I/ K
{
- R. W: v. G' j: M/ B* }
document.all.tooltip.style.bgcolor=bgcolor;
- `1 t- e. a2 ]" b0 n
document.all.tooltip.innerHTML.Color = fntcolor;
{ Z9 e o/ D
}
y0 q" R" l8 G. n8 S
" y. p3 k. n* e* ?
function showhint(text)
" h. p+ H/ D4 o0 k3 O
{
9 B k$ Q3 j. J- t1 Y3 c
onmousemove=showtip(text);
) \' k; N3 ~! |; c# b% K# }5 R2 T
onmouseover=showtip(text);
$ h7 L' ~& M( E+ K0 m1 s: b; Z
onmouseout=hidetip();
' B0 g- K9 z9 Q* Q
}
- q! x( H, Y2 U$ A( K; M: a5 e2 d8 I
</SCRIPT>
1 j! }+ ]5 A: h; @4 a) ]8 \, p6 _, v
! b8 i# p* b% ]8 ?7 W) F# s# `7 E8 j! z( k
O& F. O9 c5 Y. s5 ~3 w
* p# C6 k3 M* o- y3 y" y; a0 a: X) v
, y k! F* i1 T) m3 a$ F) O
+ n$ K, E5 d7 Z6 v
5 A9 a& z! z- F) t; ~( J7 M( [# ]
二：将下面的代码复制到〈BODY〉区
; k- I8 d- _8 x# X) r; F
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
: q: m6 _% y5 Y5 @# @0 K
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
3 s9 R6 ~+ _- y
<tbody>
3 j' I3 F% Z$ }; O2 P/ S) c
<tr align="center" bgcolor="#ffdfd0">
" z) j: ^- x3 j! ^
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
* \. |, L1 [ l4 |5 j; D
target=_blank>赏心悦目</a></td>
( C5 V$ Y; V" Q# W5 D3 R
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
. a! P: h3 \% o6 |) h0 R6 t
onMouseOut=hidetip()>网页素材</a></td>
0 D" z1 _+ _# }8 E: P/ z! @7 `
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
4 L/ }0 ^! Z6 `. E+ a6 H7 e
target=_blank>图像处理</a></td>
. G" R1 i6 e/ E R2 @; ]3 w
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
/ F- M- o- U5 a& B8 K0 d" P0 z
target=_blank>网页特效</a></td>
$ A# \: t) j# F+ @1 d
</tr>
- l: Y: u9 L8 R- j" }: F
</tbody>
& X9 a5 k) M6 m% `, J# t- B9 j
</table>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
