标题:
网页之带注释的表格菜单特效
[打印本页]
作者:
zw2004
时间:
2008-1-21 20:52
标题:
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
7 j2 R4 f* q/ r( J+ A7 P
<SCRIPT language=javascript >
& M3 h5 q* Y5 Y! P7 X
document.write(
' U2 h. J7 X- [- j0 G4 h/ [
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
/ G& I8 Z* z q& [0 f9 }) E
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
" t: \5 T! V1 M; [9 N/ q x
3 H. ~& l5 G2 o- B
function showtip(text) //显示链接的说明
3 |3 M% V4 _) T; a/ u; g: @3 s
{
' k# t7 h3 v. @ n# O6 J; W
if (document.all&&document.readyState=="complete") //针对IE
0 [6 Y6 a r9 Q( U* P8 u
{
2 u# ?( B% ]$ c
- ]- ]9 k# [( s7 Y2 r" ?) K; R/ C! p& V
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
! ]" T5 i/ R; A" N6 M& s' p5 G) Y
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
2 P9 M" m1 w$ ~- q, f' ~% ~
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
6 Y' q: X9 p( u: r3 U
document.all.tooltip.style.visibility="visible";
; Q+ j2 z! {! B
}
8 r# z& _) h7 P7 r
}
d* E* @ ^1 M$ a
5 p7 T; I6 _- D4 n
function hidetip()
% {9 \9 o1 u6 u% Y
{
E" G1 z% k2 M- A( @- G
if (document.all)
& I6 {6 I* T4 L- a) K" c# y' U% z( o
document.all.tooltip.style.visibility="hidden";
* D/ f2 D& J; @ J6 Y& o. S8 l
}
! q" t. w0 t6 }# t
4 v6 @( P5 p m- T# \
function setcolor(fntcolor,bgcolor)
) s4 P+ u/ H0 Y. p; ?& x0 n0 L- R+ \
{
! X! P3 E) u# y- I! j7 P
document.all.tooltip.style.bgcolor=bgcolor;
' P3 T1 X: {3 i
document.all.tooltip.innerHTML.Color = fntcolor;
0 T7 U Z2 m: e: e
}
, J6 H7 A9 w/ m6 M, G- s
" |) E3 n! z% M+ _; z7 a
function showhint(text)
N. U( a, q# e7 O, t
{
/ z& P6 `. |( M& ]
onmousemove=showtip(text);
* C1 N6 [& C8 d C0 O3 k( N) x
onmouseover=showtip(text);
5 I+ u* V k/ _/ R& }
onmouseout=hidetip();
! k _; ?; A! K
}
+ C( {9 i3 L: A
</SCRIPT>
) U4 v" Z0 Q, z! ?! M
' B# d3 |3 g/ l2 c, H
, ^' \7 B* P0 P
$ h; x1 b( {4 T% s( y
! D# z O& A. o; p
4 \ a" f5 a; C: ^2 G7 K( F
) @" H3 k: ^( A% z1 Y6 {
二：将下面的代码复制到〈BODY〉区
+ e/ d8 U1 E, P- {1 p
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
! T9 y+ y6 \3 c+ j. J
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
, n/ V, H$ l' Q0 e5 R, K0 m
<tbody>
2 x+ h' G% s& q6 q3 E" E
<tr align="center" bgcolor="#ffdfd0">
# a% q! x% J9 g8 y
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
# D! c6 W8 b. A7 a, O
target=_blank>赏心悦目</a></td>
6 B. \ j- I2 _
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
- H3 k6 ?* `3 Z% g
onMouseOut=hidetip()>网页素材</a></td>
; F% `1 y# F2 j8 a# K6 y8 M
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
- n2 `- ?) U9 \) g. T. W5 _
target=_blank>图像处理</a></td>
1 U8 }. _9 Y: @5 ~9 Z- r' K# G
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
/ u( b' G% m, P* f
target=_blank>网页特效</a></td>
! P) v% ~' ^: U+ o0 i$ `
</tr>
# O1 V) [2 g) o8 K' q/ Y6 G. X
</tbody>
6 A9 N! m) r8 f5 O& M4 K6 `6 t
</table>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
