标题:
网页之带注释的表格菜单特效
[打印本页]
作者:
zw2004
时间:
2008-1-21 20:52
标题:
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
+ f& L5 G" n. r, @4 [
<SCRIPT language=javascript >
J: V1 C5 X: D' m. T) Z
document.write(
: d# M! C* ^7 L2 n* f/ U a* L
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
& ~9 _5 A5 y9 b- v* o, m
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
$ m9 `! j. k! m2 C6 d* F8 l5 s7 A1 K
8 M0 Y7 U0 M7 p8 r3 j
function showtip(text) //显示链接的说明
+ p5 x, W% p8 @0 J% R
{
6 y( g4 Z' F3 G5 u% v+ l
if (document.all&&document.readyState=="complete") //针对IE
6 B7 z( m' C8 I( d: @
{
+ B8 B5 d7 {1 B6 y7 [. h* u! K( r
" e k" K6 a1 q* u* o4 B- \/ ]
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
3 p9 h1 _2 W2 F" H1 k( M: T
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
, B/ `( H: H% Y8 u- `9 g) R8 e
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
# [! [+ \; q) e) ?- w
document.all.tooltip.style.visibility="visible";
' C3 g3 T/ |# f2 i$ X5 ~
}
) ?2 S; E3 Q/ K- @ m
}
' f) O1 ?$ v0 c+ @7 `5 M
+ K, e0 \* ]5 @4 A
function hidetip()
! G8 A+ C8 q0 V6 g- | Y
{
% [0 K! o& F- ~6 _4 j m! i
if (document.all)
# b0 n" ^4 { l) N. z# o" n. `% S
document.all.tooltip.style.visibility="hidden";
5 l8 X9 j4 @/ C# g4 ?6 I
}
5 f' y. a" j* Y
/ d+ K+ J4 z- J: N
function setcolor(fntcolor,bgcolor)
8 F, |7 k. h8 ^
{
1 [1 o/ j! g2 o) L/ D
document.all.tooltip.style.bgcolor=bgcolor;
: d. a0 K8 g* P! O( T
document.all.tooltip.innerHTML.Color = fntcolor;
5 C8 F, t7 I$ l& o& s8 Q0 F
}
; a1 @5 P6 m! @
* l! T$ p! m& \( |3 ~2 l. C# }8 d/ C
function showhint(text)
, f) V& n" p, c: B
{
3 P2 |5 I4 o8 {1 f
onmousemove=showtip(text);
2 l3 ^5 d: u# V0 Q7 A
onmouseover=showtip(text);
. V. g S; }9 @# r" s
onmouseout=hidetip();
( C/ p5 }! B% E) R! A+ f
}
0 a) R' }' `/ N" x
</SCRIPT>
: X1 s1 f9 l y: U3 p5 c- s
* w0 F% ]& y6 W* l2 a% ~1 ~
5 y1 `" Q" R H4 J: h* K
' V' J4 ]' e# o4 P5 N' v) w
! s3 s7 V" U1 P0 e& { u! R, t
9 K5 @ [0 g0 h- F: v2 {6 z
5 X$ f4 e( C# [4 g+ c- O+ D, s
二：将下面的代码复制到〈BODY〉区
5 h8 R8 x. N( r @
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
. O1 p6 w/ w$ ?6 Z' |# Y
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
) ]- |' Z" b" |9 N/ F) ~: T! M l
<tbody>
: t4 ]% O0 i/ M9 {% g# f
<tr align="center" bgcolor="#ffdfd0">
5 L( I1 c) j* Q- ^0 \" `/ T
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
4 D( [' \1 w& [" n7 G" e0 f
target=_blank>赏心悦目</a></td>
2 _7 X, [* A; f
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
+ n O9 b! o! h5 I0 ~* K# |
onMouseOut=hidetip()>网页素材</a></td>
* \4 r7 v. E& d2 x4 {! ~, b
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
6 A2 g$ Y6 {# d) N" W6 S$ l
target=_blank>图像处理</a></td>
3 v: v' a; ?9 d2 r( m% A
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
& Q! g1 D* V5 F4 n$ h
target=_blank>网页特效</a></td>
( }$ i9 x6 N3 n7 _* `( d' `4 A
</tr>
% g1 i8 L; p' z8 L; a* H6 |' A
</tbody>
8 ~% R' ]: `- g! v$ f7 O
</table>
欢迎光临 捌玖网络工作室 (http://www.89w.org/)
Powered by Discuz! 7.2
