标题:
网页之带注释的表格菜单特效
[打印本页]
作者:
zw2004
时间:
2008-1-21 20:52
标题:
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
2 e" ?$ J3 a8 d4 Z1 w
<SCRIPT language=javascript >
( X* h( K [0 A; G
document.write(
p1 `6 D# i) S) k
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
3 d7 S4 @7 ^ u! T
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
0 k4 ~" G0 O; j2 Z, Z
( u/ M5 A! C% @
function showtip(text) //显示链接的说明
, T! T6 [& a% b4 j+ [* V: J- C
{
/ ?7 E, d5 C/ T) n& o6 j
if (document.all&&document.readyState=="complete") //针对IE
: a! v' H$ g' N
{
) ?' g% \* w# \
$ U2 g% {& f/ [* ~2 ?0 Y5 q8 N2 X
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
/ s4 r/ U8 n: }" U) G6 T/ P
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
4 `0 e6 V" u4 w" J" N
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
6 K( q) \# B( L- I& M7 O
document.all.tooltip.style.visibility="visible";
' \# k4 S, {" e
}
, D7 H, b% r3 M0 i5 u: A$ v
}
0 Q- D8 Q; g3 f
% ~4 z7 T- s3 v% b
function hidetip()
4 W9 X2 U; }( O0 e0 W
{
# P* a4 z1 H. S* E; u/ G3 i+ e1 F
if (document.all)
3 u' g* X6 p$ H2 W$ c. Y( }7 s
document.all.tooltip.style.visibility="hidden";
. x, D4 \. _# Y; W( R9 F+ S" ?/ B
}
' ?! N3 _- u S; c
l) ^! t2 u; _; G
function setcolor(fntcolor,bgcolor)
8 Z& F/ F$ |2 z5 m( O2 h% Y/ [0 h
{
" d* ~- e! ]" N# l- r" v: Z9 S! E
document.all.tooltip.style.bgcolor=bgcolor;
5 t4 C. I0 Q' P# O I, t: A& O
document.all.tooltip.innerHTML.Color = fntcolor;
/ T, R4 I5 {) J' d( ]% @
}
& m3 E$ r, `6 z( U) [* q& x
1 i+ Q- [; l$ O) {, d* T. [
function showhint(text)
$ O/ q2 m0 ?1 e! S8 V+ O1 m6 `
{
/ e' u+ O: N8 |* K' o; K
onmousemove=showtip(text);
& \ s7 |! v! W/ x q/ z0 @
onmouseover=showtip(text);
9 n5 H$ q' O) {
onmouseout=hidetip();
" Z, V$ C- q* |* k# P+ X
}
" a9 b- g, s+ y8 Q6 O+ F
</SCRIPT>
* _* O3 f/ ?* V' A: U) \" s
) j8 M4 s2 H6 Z6 {% _0 a
: o4 o; c( \5 ]) l3 b
! ? ]1 l5 D: \( C- ^0 R/ {4 f
% I1 o |# @, ~ m
! e" N. r( U9 p6 O* y2 K4 C
4 K& D/ p; v+ Q. Z3 E7 Q
二：将下面的代码复制到〈BODY〉区
- p9 }3 |* l$ G* o
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
2 K/ u2 m& i. K' I
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
1 w9 P$ t2 Z4 U
<tbody>
9 O! }8 \: w6 r ^2 j
<tr align="center" bgcolor="#ffdfd0">
, [4 H- p, R0 O% [1 q
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
/ f; J @" e/ c
target=_blank>赏心悦目</a></td>
3 a; t' [" F" T1 _) L7 Z$ U6 i
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
; C) t& W) r B7 @4 w# I2 J
onMouseOut=hidetip()>网页素材</a></td>
9 T* H" z9 p5 J, t) b- }
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
, @5 I% ] w/ G* `
target=_blank>图像处理</a></td>
$ Y" b& O8 B e4 y4 b
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
) ?2 P, E; q8 |1 m
target=_blank>网页特效</a></td>
7 B2 B% T$ r' ~5 i. C. V4 V% v
</tr>
1 U; t* |7 j) B! a7 T, Y/ a
</tbody>
4 L: s' f/ O1 V4 T$ [# x
</table>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
