|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
0 g; P) n9 \+ o" `8 o% S<SCRIPT language=javascript >* i3 p4 c4 A- _, g! |6 J
document.write( l0 D6 |( T" _8 S2 |) ]
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
4 B) V4 w) A5 b6 d" t. o;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
. u& R" i5 a7 k" v# y$ a+ z7 U9 P. g9 M1 _" r$ [
function showtip(text) //显示链接的说明
, m$ Z) m9 T6 ?, V{/ E0 M+ M& c7 o5 x* ~
if (document.all&&document.readyState=="complete") //针对IE- v: }- L' c# J* K4 h h
{. T$ h3 n2 Q6 D4 C8 s% j. _" W1 _
6 t7 |; y7 ]" P6 L( i2 D
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";" m6 f; |/ D: z+ Y
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
$ Q8 p; l' `( {! u document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;+ t. V' a1 l: U) S* f9 U3 Q1 @
document.all.tooltip.style.visibility="visible";
# m* S( a7 I! P }
+ p( ~* r2 F v}+ \# o# l5 m3 x1 q7 h' ]
- [$ P T7 f+ B' i3 j, Z
function hidetip()
. r. Q+ y8 I; G, l. S! X{( D$ b/ n! H. r x) i8 p/ J
if (document.all)3 C# [+ B7 a& A7 J. H& e+ i$ Y
document.all.tooltip.style.visibility="hidden";
! S' V7 B+ u |# R) x}
2 Z- m! W6 Q& F& R; ~1 c7 H m$ q6 r2 g9 A8 o5 J+ G. Y* P$ l/ M
function setcolor(fntcolor,bgcolor)
' ~4 `2 @% w; i# S{2 i3 \: r9 W1 ]! P$ I! H1 j. h# I; P
document.all.tooltip.style.bgcolor=bgcolor;4 g2 G. x; L0 h& A h2 ]! M/ |* `
document.all.tooltip.innerHTML.Color = fntcolor;0 q C( a. l2 Z( I
}# V1 B# o- R0 ~+ o$ }
3 j! D3 ?# S/ ?) nfunction showhint(text)( ?& c4 \- X Q) w( W% w( S" D+ q
{
5 l6 R# |5 `' z, E8 v B onmousemove=showtip(text);" t+ n; i, q* A; I6 ?' w
onmouseover=showtip(text);
' ^# U2 v2 h' t- M9 Q onmouseout=hidetip();
) j& t4 Z! w$ S}4 @" x& k+ ^- V7 Q
</SCRIPT>
' X. r, S0 y& _6 E+ q
) D* l3 Y4 `% @3 V" z! ~3 o
% g/ k5 n! _8 S& C" n [9 e$ H. U2 [& c5 Y! i
* I6 ?. f2 A* c; g. T4 c) J: r1 D( i, T$ k9 H
( R/ c2 I$ |$ ^* x# h
二：将下面的代码复制到〈BODY〉区
. t: q* P7 z% h. W+ K<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
; G- e, a- X1 D$ W0 [ scellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">/ n: J! D, a, G
<tbody>
( `4 y$ y8 t# N: d5 K <tr align="center" bgcolor="#ffdfd0">
* T- k; v$ @% W+ e3 U <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
+ s3 `: z) s- \0 m0 L5 X5 M: a x target=_blank>赏心悦目</a></td>4 ?5 p6 c$ S& R% z; x( T0 ~
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
3 e; t& z" R! c. b& X+ K onMouseOut=hidetip()>网页素材</a></td>
- @( X0 z* E4 e' D <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() 6 V) D! h6 J7 k: p. [8 G- I
target=_blank>图像处理</a></td># Y3 g! e% a1 @8 v. x/ o
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() ) K4 b- z& \ e: s
target=_blank>网页特效</a></td>6 q+ C2 z% Q0 S+ w- \7 |% \1 |
</tr>
& r( [+ B# V# C3 l- N# N </tbody> ; y* s5 k% N% S9 n. D& d4 j) \
</table> |
|
发表于 2008-1-21 20:52
|