标题:
网页之带注释的表格菜单特效
[打印本页]
作者:
zw2004
时间:
2008-1-21 20:52
标题:
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
; }; P$ i3 j0 D
<SCRIPT language=javascript >
; p: Q, [" }# a- S8 c) H6 v
document.write(
8 v4 S: a$ {. S& i
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
( o" }1 k2 z: P/ J3 Q
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
. N6 F8 G( }' g% _
: R- p$ X, m$ s, e. K9 H' s
function showtip(text) //显示链接的说明
7 k2 A% K7 ~9 a
{
5 |" @' d% }1 }+ {" T
if (document.all&&document.readyState=="complete") //针对IE
! {7 ^( Z9 N P( e: c
{
, f U7 q5 M/ Q( m3 F& ]2 G
( M1 S; F% E5 e) K2 B7 K
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
+ p; k: w( o7 d' B8 h
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
( ]. y" k3 t5 p: k
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
, |1 @! p C4 b8 s0 {* M5 ?
document.all.tooltip.style.visibility="visible";
: z" m$ k4 M# B4 b( _ E
}
# j! p' C0 U5 i7 C% g* P
}
: H% J N5 ?2 t5 k1 i
/ ~) S" ?7 i/ R! T3 H
function hidetip()
: H3 K( Y' M1 y0 }5 P- L
{
. x6 t" ~- h$ l4 `$ e
if (document.all)
& R. W& b; v# E8 y/ G) n' T
document.all.tooltip.style.visibility="hidden";
' m$ ^ e8 @: F |; o/ B" H
}
6 e0 f; K9 i" P4 m9 Y" a
4 N3 c- G5 I4 T6 A6 M+ g
function setcolor(fntcolor,bgcolor)
+ `/ ~& v, Y" K3 q# S
{
# y2 O) t/ a: l3 D! A
document.all.tooltip.style.bgcolor=bgcolor;
. Y3 n9 U! @3 @8 D
document.all.tooltip.innerHTML.Color = fntcolor;
$ y) Z/ k# @6 V! Y2 K" H& t F
}
! F( S8 C+ B3 Z- l1 B/ D
* l' U& |( w( N' [! F
function showhint(text)
/ N2 I7 Y* M# |
{
6 n0 _) S. H% ]! d* K( ~* T- ~# V
onmousemove=showtip(text);
0 b6 o& I! P1 y) `% s. I
onmouseover=showtip(text);
- J+ N1 p. D+ d& F
onmouseout=hidetip();
! _" r1 C- w$ c* @
}
/ x3 F) b9 W1 j+ W9 H* S
</SCRIPT>
' j& r. \# k) |) i4 n& |& J& E
. i0 j/ t, Q3 @$ Y6 r! C3 A
+ N' |: p) D. i# D% g- e- D- f
0 ^# u0 ]& {5 Q7 I1 ?
: @/ R$ Y" F, p) q2 V
4 Q, {* }* ` |' v
}; y: L! `. y; A+ `( E% G
二：将下面的代码复制到〈BODY〉区
5 i# u: l, n3 u4 y4 f9 ]1 Z* I
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
Q, ?, O/ n/ n/ z6 a) \
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
' q; o) _# f- F0 D" h- K: `) v
<tbody>
* V- M! W0 z p. m" m4 z3 T1 i4 @0 V
<tr align="center" bgcolor="#ffdfd0">
+ P8 F3 F/ ]' q. S6 p4 ^( i
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
; G8 W+ q' `6 D- E/ u
target=_blank>赏心悦目</a></td>
% G0 q5 q& n7 @! B9 |
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
, B* x9 i$ n8 B/ H7 H9 L( j- _$ f
onMouseOut=hidetip()>网页素材</a></td>
7 z# r- j% A$ F6 c4 Q7 X# }: v
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
2 C2 e, u! `5 o b
target=_blank>图像处理</a></td>
4 e1 \6 w: a* y
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
5 _: k1 `% ^$ { B- h9 t: m/ k
target=_blank>网页特效</a></td>
, U3 ^ o& c3 H: ^% P" }
</tr>
2 s& y6 j7 L& u0 l/ b3 n
</tbody>
0 e% R# |9 A, I5 [5 ]
</table>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
