标题:
网页之带注释的表格菜单特效
[打印本页]
作者:
zw2004
时间:
2008-1-21 20:52
标题:
网页之带注释的表格菜单特效
一:将下面的代码放在<HEAD>与</HEAD>之间
! m# k0 j9 j+ A, O
<SCRIPT language=javascript >
: I" K @" }' D7 O8 N
document.write(
6 m! ]' j3 u1 Y2 a/ e
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
; E/ W0 h! E! Z) h/ Z( [! m
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
) p& O% T4 C& t0 D1 F* D3 ^
$ e; h$ c( A8 j/ w' S! q
function showtip(text) //显示链接的说明
/ f0 }+ P* ?+ r1 x
{
1 y- g+ Z9 j# t! [7 T0 C
if (document.all&&document.readyState=="complete") //针对IE
7 B8 Z1 ]# ?+ [* p4 X' B# H: Z) U
{
, h5 `8 R& h, Z. K9 {7 f& H b
& _3 P+ J+ f5 ?, ~, n- d
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
9 M, D4 z- K m% z+ _
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
# C5 y, F6 M$ P+ ~
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
: `, y! p; F2 x% U8 F
document.all.tooltip.style.visibility="visible";
" b3 f2 k- g( T
}
, }) r5 N7 x5 o
}
4 D! V+ x, I) N
7 w; @9 V2 I3 \1 l( S- \6 L( O
function hidetip()
# u# S2 _$ Q$ |- Q
{
4 W5 O$ T! g9 g# Q" `% n
if (document.all)
1 Y( K2 I1 I" Q3 m( F( N
document.all.tooltip.style.visibility="hidden";
% i' x6 j) u' E4 t H
}
; P) g/ _; s; ]: a1 h( z: G
0 H+ ~. H: B, t" H2 L
function setcolor(fntcolor,bgcolor)
$ k4 y, q6 I6 [3 a7 F) O: j
{
/ N4 h& p/ Z. T! ^, e7 B
document.all.tooltip.style.bgcolor=bgcolor;
2 o6 w( O4 x1 _
document.all.tooltip.innerHTML.Color = fntcolor;
9 k1 \; g+ q6 Q: }9 x
}
; j7 P4 n' \' c/ P6 C
& W5 o. C& `6 i7 n
function showhint(text)
4 c! f, t3 k' \5 G
{
# E& O+ S$ G d6 O3 f8 a
onmousemove=showtip(text);
4 V X" n) Z3 }8 `. g) K2 I' ^
onmouseover=showtip(text);
( G$ S/ K$ D' M
onmouseout=hidetip();
8 \+ x/ J7 }2 m
}
2 B5 U& o0 K3 N4 q3 @" X( J' y
</SCRIPT>
: g# ^0 B( F& y; `& K
, P$ C# L' Z) Z( z9 a3 D' S' }" w
5 X* p& |$ d% s
6 k: Z( H5 ]2 f. [ Z9 i1 ]' |7 Y
$ A9 E U5 R# h/ @1 @' z2 L
* D' z0 d% {! R6 y5 H
$ o& O/ S. ^1 H& C) y8 Y
二:将下面的代码复制到〈BODY〉区
8 \* ~7 H. i3 K! }3 W. A7 @! f
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
) N+ g6 Q8 c& l
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
+ ~* P" @. A q' W$ m, ?) V
<tbody>
9 q: o# e( k$ y8 F9 j
<tr align="center" bgcolor="#ffdfd0">
& V' F$ p( r$ C7 M1 q, {7 ^
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松!')" onMouseOut=hidetip()
i. s: S- E8 G3 n) J2 H! q* P
target=_blank>赏心悦目</a></td>
4 l1 J( ?( a2 `6 I
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便!')"
& b/ W0 E7 x7 H+ }1 r2 V7 K
onMouseOut=hidetip()>网页素材</a></td>
' C2 N+ @! O0 q2 ?
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
( P+ g' _# @# D+ D6 F6 D
target=_blank>图像处理</a></td>
2 B% C- n5 o/ V& J0 X* K
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库,有详细的使用说明')" onMouseOut=hidetip()
# A0 K/ X& d' s. |1 t1 C- i
target=_blank>网页特效</a></td>
9 |% a# E+ ?. j& q |0 c" K
</tr>
; W) q5 E* v+ [6 I
</tbody>
# d# k6 K# \' ], a2 N# [& K! V
</table>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2