|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间3 t7 H- A8 p' d0 m% R3 A# p6 @
<SCRIPT language=javascript >! ~( a% a/ }, t0 h" A
document.write(1 G; E0 ?8 n: B5 s
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\6 _$ A: q' a5 R6 E/ j% v
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
@9 r0 X# K D/ T! o- u' D6 w* ^% ?3 \
function showtip(text) //显示链接的说明7 w% Y, j6 L# W) ^4 K4 \8 m! S, c
{0 g! T$ x. f O
if (document.all&&document.readyState=="complete") //针对IE* Y7 L( u% B5 Y8 E2 A9 L- }
{6 k% m5 |9 Q! y: c7 _- B' Z
, ^9 S! k' q1 w3 H8 e. R" { document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
1 n% L0 u* L2 K" \' t" ` document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;' O( j7 L8 x1 r, i7 \
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;7 T# c( T& B6 T
document.all.tooltip.style.visibility="visible";1 u. t8 d6 S4 ?1 W* A
}
/ B7 [5 W: g% ]4 O, t}- [( {6 O8 [; t. _9 ~: R) ~0 e, t# t) _
( [! I" V/ _7 e% { vfunction hidetip() 1 ^3 Q i8 o Z+ I; N3 A
{- L. }1 x( f3 h; V
if (document.all)# ~* c B5 j2 y/ R8 y
document.all.tooltip.style.visibility="hidden";2 D8 W9 W" F: ]. S. t7 e
}
8 T4 L* d$ z6 u# F! R# ?1 Y6 r+ _3 W: y! ?
function setcolor(fntcolor,bgcolor)
$ F9 Q6 u0 `6 J/ [1 v+ e/ t{
t' o$ c! T* E8 g+ q' T document.all.tooltip.style.bgcolor=bgcolor;
: \/ K+ e$ N3 l1 k' L$ a: L2 O2 e document.all.tooltip.innerHTML.Color = fntcolor;. \" K2 `- |4 R7 M4 c3 @6 e% W
}
4 q( s& w8 X6 p4 `4 Q* q4 k2 T* q* o
+ z* f! _, ]9 U3 R zfunction showhint(text)
4 u% E- A4 M' j2 a- z{% p; V; H, W4 p( a7 M$ ?* r U% M
onmousemove=showtip(text);8 B7 C/ D& c" J7 v( e, j- h
onmouseover=showtip(text);
8 U. C( ]4 R/ r i! o onmouseout=hidetip();
" J; ~" S# _( ]5 W3 p}2 g. ], f# V6 N- W" |* i6 L1 B
</SCRIPT>
W6 v1 Y3 J& ]7 h2 O
7 f6 d9 M4 i% @# z
/ [$ ]" l2 D& F, H7 R/ @
) i, J! o1 r+ E: E# r# ?& N& a' m! b6 {7 k, i' ^
0 ?% g% } d* t- `$ d
1 a4 ^, h/ l4 [1 b. e二：将下面的代码复制到〈BODY〉区$ _2 w* C. ~+ n- l9 e
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 6 x2 x0 H- k; g. c3 |6 X- q( Y3 N
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">8 U; C" _! J" m$ b
<tbody> / O v$ y4 k! S' o0 i
<tr align="center" bgcolor="#ffdfd0"> 6 w' h t, W7 Q3 ^9 Z$ ?8 O) y
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
V9 t" y% [, c" o4 [! \ target=_blank>赏心悦目</a></td>8 h0 u0 F8 r0 z* j5 H, @
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" ) z5 z/ ?0 W w- M+ b2 R7 e. y
onMouseOut=hidetip()>网页素材</a></td># Y7 ^, g- E3 ~9 D, s. G) ~- ?
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() * ?! I8 h f A4 S7 i
target=_blank>图像处理</a></td>
6 B! l* F! y# \3 m2 M: x <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
+ C3 J+ N; F% a1 y1 G* R$ ?. } target=_blank>网页特效</a></td>
, Y( {) _6 Y4 J0 z2 P </tr>! D' J, o# s- T4 q0 n
</tbody>
- S W1 @( {* K+ D8 U' y8 V </table> |
|
发表于 2008-1-21 20:52
|