|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
9 v4 |5 l3 }3 I3 M) P- \! K<SCRIPT language=javascript >
, I) g Q* i6 v4 |document.write(3 d6 r2 g7 t3 }* r2 X7 f/ ]* K# j
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
' o5 ~3 E" o& p5 N) m;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
2 X5 `, e* ~# j; `. E4 s. ?. B; N# H& ^8 `* j G9 N
function showtip(text) //显示链接的说明* ?% W) s) k( r
{. e7 P) v0 n8 D/ T9 N4 U7 A
if (document.all&&document.readyState=="complete") //针对IE
% F& O* k: A F! s9 w! C {
: E, s5 ]8 f7 x9 G' j" A3 Z
r5 M( O: M1 K+ A) ]1 w document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
# e+ J( e% ]3 p0 P document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
3 |# o% r4 ?* a, \. E9 l document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
g, C3 `+ y( Z document.all.tooltip.style.visibility="visible";( | k; @0 ?8 d+ H8 @4 e" L
}, B8 I/ q( y( _% W3 c# w
}$ _0 n% N% x& ]# d
9 D5 [; G: m2 }, S m I4 J
function hidetip() / A2 d, a9 t/ L+ U8 h7 H U* f O
{
' K$ c$ H; J2 J2 O5 M1 Rif (document.all)9 ~. M* O6 m8 D' f( c
document.all.tooltip.style.visibility="hidden";
( `9 v6 v) J+ }}. l) {2 w7 ~) p8 R* i& k8 l
& R$ j _7 [* q* [% w8 Q
function setcolor(fntcolor,bgcolor)6 D8 d3 R5 H% H$ A3 S3 R3 v' X
{
9 q Z3 ^ C/ w5 F' W( D* Z document.all.tooltip.style.bgcolor=bgcolor;
3 s5 S; S! S. ?: w% C# J4 P0 f( Y$ h document.all.tooltip.innerHTML.Color = fntcolor;
, B* m1 j2 a3 d2 @, x) W}3 ^" m6 i& ]% p7 b) d# j2 Z
2 j; a2 I: X2 _; U; ^* h
function showhint(text)
( D( E" d# A2 K# _3 R{1 ?* i! `, K3 U" k( p
onmousemove=showtip(text);( q4 Y* J" I/ D/ Q3 C. w2 A
onmouseover=showtip(text);
# L' K3 B# ^' n4 d onmouseout=hidetip();
$ _, u# p) k- q. }}
$ Y, u; o# J5 X: p# R</SCRIPT>' p# F) I9 e0 J0 b5 K: C
* ^9 z4 V$ J) J& G% z1 A" H" e% G" ]5 G/ o& x
5 ~' @3 y D# `4 R4 K" {( T
( |/ g, b: y/ N& P# { p1 v% b- ^. B5 S9 w+ ^
: p/ v! q) H8 q; _( `! H; t7 N二：将下面的代码复制到〈BODY〉区& z# V+ ?5 [* E4 C( Z+ y4 o+ N
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 - M. r1 I# W; F0 w2 x8 b0 y
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
1 F. r a l, ] <tbody> + ?& L/ t; i6 i% x2 l3 Q1 F; ~
<tr align="center" bgcolor="#ffdfd0"> 4 y M9 `' K& C: Y8 L3 V
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
8 h R+ [* w, X" D1 e target=_blank>赏心悦目</a></td> L0 P& f- M8 `) s( a* O7 S
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" - }$ E# A2 v* t$ v$ X& @* s
onMouseOut=hidetip()>网页素材</a></td>6 c9 \8 d: i a
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
% B j2 v$ I( s0 G! }% s9 x D8 r target=_blank>图像处理</a></td>
1 S8 J- t" t: Y1 V( _' q0 y <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() , x% }" s* D3 I/ P6 _
target=_blank>网页特效</a></td>
, g1 X' ^6 P/ J( M, l: E, [8 I8 d! n </tr>
0 U$ w) y Z- x! t2 X/ Y$ G+ O! u </tbody> 8 M4 N( A3 n/ G% v* }* _
</table> |
|
发表于 2008-1-21 20:52
|