|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间9 x, N5 E0 O7 e* f% A5 x; {7 P- {: K
<SCRIPT language=javascript >
* t+ N, t8 J6 V7 C" c4 U" odocument.write(" D6 t, G, \5 M2 b7 t. V) L- L/ n. S
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\) F& t# B9 z4 B
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");* d! i7 }: A& s" O9 `8 D
" ?) a9 S& ~4 U8 X4 Y
function showtip(text) //显示链接的说明 F1 G# D6 S, N, ~
{1 V* v7 e6 t9 l. K% z' o& b o& I
if (document.all&&document.readyState=="complete") //针对IE
# b7 f1 m( S2 r% s; ~ {
- _" `& D: |, E- g $ S# [, k w6 n1 r
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
$ y2 D. i% Y2 E document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
' _# u) p+ h6 m8 I" h6 [ document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
5 v5 }' \, {- Q/ w4 Y3 i document.all.tooltip.style.visibility="visible";
8 Y' J4 u# G/ [) w! v; k& D5 o }
8 x0 I( I' {. V$ M: b}
" |. S* l0 \9 s; [! y1 N6 d2 r
5 {% C& @ m9 L$ Yfunction hidetip()
; R! H z7 W6 y9 c{
& g$ p9 A# g+ E4 g; a1 ]* f2 l- x8 z0 mif (document.all)+ X3 K$ Q; N& ~! x, N6 }& Y
document.all.tooltip.style.visibility="hidden";
. k( F$ W( C R& @% ]. X: W5 x. h}
6 J0 E9 k: n$ }0 x0 f# p) ]' R4 E$ {
function setcolor(fntcolor,bgcolor)3 \ w& v. S9 A% ]2 t
{
$ D% z# l8 x0 C6 K document.all.tooltip.style.bgcolor=bgcolor;
' @( H9 O+ l3 `/ @# P document.all.tooltip.innerHTML.Color = fntcolor;
7 l. a$ y5 A. f5 `}
' h* \; @# ~8 P) J! \
) U0 u* ~5 [! ~. b7 S) n' ^function showhint(text)! w3 L [5 _6 |0 M& L/ ?* @
{* @& h5 h# }. m4 r, Z7 a
onmousemove=showtip(text);
0 |; S$ x& q% \! v) u& ] onmouseover=showtip(text);
' `3 }+ v7 G- |$ ~ onmouseout=hidetip();
1 G: l" `( E! b/ S}
# h" @, v( K: W1 {: G3 C$ Z3 m0 q0 R</SCRIPT>
- P% E0 @/ o0 B
& P& A9 V% H0 Z+ \. u h3 @6 N) q! c1 x
8 O) w# I+ |0 E' }9 g' B$ f* l8 |/ b4 e$ {! s! B$ Q/ E
* M$ T+ J8 O, a1 @, H0 G" a. @9 l
& P8 e' ^# g0 l) t" Q' ?0 z
二：将下面的代码复制到〈BODY〉区
5 ?6 v& p! }6 n0 f( q<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
2 _/ p2 n3 u8 a, N, r2 o# K6 Y* mcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
) k/ `/ R0 q0 I% }# \2 S0 i, k3 O <tbody>
0 A4 G8 G4 C8 V- Y. A <tr align="center" bgcolor="#ffdfd0"> ( G0 _- J) ]& t Q: d; k
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() . h1 P$ U y- I7 g/ b* E7 L) b
target=_blank>赏心悦目</a></td>: ]- g. h8 t9 s7 _ p% Z0 m
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
9 M1 G# {5 L1 s5 r. a& O" R' s6 ] onMouseOut=hidetip()>网页素材</a></td>9 j" u5 P$ {& s" |. s4 S. `0 s5 Q+ }
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() 8 \# O( u' ^+ I* ]9 m* U, i* _
target=_blank>图像处理</a></td>
. m. w9 z8 Y7 t9 o, U& j5 O+ G <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 7 }& C; r+ {* V( ?! V+ q; r) v
target=_blank>网页特效</a></td>$ ^9 z+ y1 x4 h0 s( K" s) z! P; a& o
</tr>
7 F+ m, h9 Z+ |9 w3 i7 \9 k4 Y+ T </tbody>
( N+ t# S% t6 k8 L" Z </table> |
|
发表于 2008-1-21 20:52
|