|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
- I$ W9 ]1 O! D0 |* R) K: c<SCRIPT language=javascript >
* P/ y$ }; E1 xdocument.write(3 P; {) [& i- c4 m4 B
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
, k) M7 W1 m { n;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
9 p0 f i! Z z$ h8 s8 H8 I; I5 O3 q9 v/ {1 a9 ^- r. g& h( Z- X/ n
function showtip(text) //显示链接的说明9 K. m7 e X! {0 H: ]8 O
{
1 `9 ^% S: F8 a) Q( l, w if (document.all&&document.readyState=="complete") //针对IE6 p" f# e! K( A( S6 f
{6 l' ]9 T; G6 l3 T/ F7 `
: C: z1 H2 t' I) O6 R1 A5 T# A' T
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";& y2 y/ H+ H5 C% O5 S. e: S) `/ U
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;% p) q* \" }/ J7 H X8 s& Q
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
4 d' z/ a- `- q8 W5 ^, `5 H document.all.tooltip.style.visibility="visible";
5 d; Q+ G9 n. v }2 _+ J5 a* Z t2 L! |; C' _& X. i t
}, ]4 A$ i) b, ]0 u* V7 f
5 _# T, W2 T+ x- E
function hidetip()
/ Q( w1 X2 k& a2 D! Y g) @2 U{
+ \- y6 m/ N8 Q; d1 @% T8 M! ]: lif (document.all)8 W$ b& D9 F' t$ |
document.all.tooltip.style.visibility="hidden";
5 H1 g7 p' G1 Q V& A# r}
5 r6 u* H% Q, o3 o1 |& e5 H J# Q) z# I# ~% ]" E: V, b; q
function setcolor(fntcolor,bgcolor)1 Q2 [8 {4 H# F6 c2 s0 o. j: n3 T
{0 h7 @% {6 j) t8 W: u
document.all.tooltip.style.bgcolor=bgcolor;
) X' B. ~, N$ W' \/ E9 Y document.all.tooltip.innerHTML.Color = fntcolor;
5 E& X/ b& `* U}
$ M; k! \- f1 I5 D U% k4 m1 Q
function showhint(text)
. T5 N, f4 q S1 G8 C{" r$ |$ r) ~: e; m2 ~% C9 H. m7 T
onmousemove=showtip(text);5 f( N1 H: ?7 a1 B% h w
onmouseover=showtip(text);
, U7 z# s' C1 H& h+ \# ] onmouseout=hidetip();: q1 ^' [9 V! }: p
}
- E6 c# p9 n6 U; m9 O" N2 x. T( M</SCRIPT>
. D. [1 }; L, C5 t3 ]! G/ o# y& G6 i8 \; G E
8 u$ [& E3 [% u# W6 {, ?. P$ g1 }0 R
$ O0 F% e& E3 p7 w' R# a+ w3 @
2 w1 b# ?1 l# `" I( ^
. T; c9 r, B$ W) M) E* @8 a
, y- g" l+ d' Y1 D二：将下面的代码复制到〈BODY〉区
5 |, [5 K3 G9 ?, t* F<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 % I; j2 S6 ]* q% O0 w5 m8 U% P
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">' v3 w* ~! ~2 e8 ?9 J l$ x
<tbody> % O1 a5 m6 g' ^
<tr align="center" bgcolor="#ffdfd0">
/ P( l& ~8 {+ T. D! Y7 s <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
7 p3 g7 A F; e/ d! w/ R target=_blank>赏心悦目</a></td>
3 q) \4 W/ @$ F <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
# @) w$ h0 [6 J0 X6 o onMouseOut=hidetip()>网页素材</a></td>
# J7 O* ~; i5 w <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
4 k G* Q/ z# c# O. Y; b; a6 ] target=_blank>图像处理</a></td>* x9 p2 @% X8 ~# _! {, u% w
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
! @. w; A" E$ Q: s4 ` target=_blank>网页特效</a></td>
9 M; r/ v. g2 { </tr>
* W8 Y3 W) t" m b </tbody>
( ?- r% m: A# i9 q </table> |
|
发表于 2008-1-21 20:52
|