|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
# ]% u) S$ u9 ^3 H' O<SCRIPT language=javascript >
& L& y1 y* i2 F2 r+ a# l4 e* cdocument.write(
# S0 X2 ]" \1 `& n5 i( L"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\) { z+ C! J* v9 Z+ i; N
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
7 Y$ [ A+ f7 |3 w% V
9 S6 X9 q) {9 o" s/ Jfunction showtip(text) //显示链接的说明
+ I% e u% L5 A0 s# _{
/ v0 ^: Q8 ]1 z- W! K0 T if (document.all&&document.readyState=="complete") //针对IE: f# ]" u0 x: p+ Y3 T) Q4 \
{
) X5 [% o; n7 T) \- W : o4 U% L3 Z! a: H) S( C
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
+ z5 u( q2 P9 E$ K- W5 K document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
4 A) }2 h/ E: L$ i# i* P document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
" ~+ c+ n* D8 l5 ~4 C. \ document.all.tooltip.style.visibility="visible";
$ e% L5 v) g2 M, a& o }
0 J: V/ \; @- {+ d0 _}
$ j( J. d" p) z# ?& O! d0 P0 l( E. j
function hidetip()
8 F& ]# j' k6 w; V. s# j( e{
8 u' u1 F! M/ Eif (document.all)
6 {3 x& x2 V9 D; o1 ?+ o document.all.tooltip.style.visibility="hidden";# t3 P! w0 f7 Q6 d9 Y M
}
5 {6 {3 {; y2 e: \9 k% Z- |% ~$ m" } O6 p
function setcolor(fntcolor,bgcolor)
' m% A8 n+ o. ]* ?% R% d{; R' q# [( m* q( k! A8 N
document.all.tooltip.style.bgcolor=bgcolor;
0 d V9 \& F, A; H" b( u9 | document.all.tooltip.innerHTML.Color = fntcolor;; B$ U5 A H( g9 D4 x+ c$ @5 d3 u+ u
}8 }6 r* c6 f8 w
# w% ?; ~; V5 w' v# vfunction showhint(text): M/ Z0 X; P u n2 V
{5 u. ?2 P* L8 C- P6 c/ k
onmousemove=showtip(text);
# K/ W. R5 A: }. ? onmouseover=showtip(text);
4 s; n7 U0 q! S; G2 M onmouseout=hidetip();6 z; k/ ?- ?0 S( N$ }
}! Z) @0 f* K# j6 v3 t; R# {
</SCRIPT>
% R* q: ~: I! J: f" w! g9 h& \" ]+ t% c4 Q ]5 {: ~! q
3 m" [7 U, J0 |# S" e0 U2 \" K6 M: `6 y; z1 H3 G
* [3 G0 R) C* s7 W9 v5 z" e9 l) d" R5 g2 @9 l! N
$ Z! D1 k s) a- d* y* I* N二：将下面的代码复制到〈BODY〉区% n- `' C; @ z" G4 u' U8 H
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 3 b/ }2 p( c* Q4 y
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">9 a; }5 q: U' U* g
<tbody> . l* H# C; ?' ? f
<tr align="center" bgcolor="#ffdfd0"> ; m$ z2 @ E- ]+ N. M9 I* U
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
0 Q s x6 N: B/ f/ g5 X. K target=_blank>赏心悦目</a></td>
7 G/ q- k2 p: \4 H6 T* p <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" * h, T; G, w7 k. A4 a& O2 v
onMouseOut=hidetip()>网页素材</a></td>9 g; C, M) c* E* l
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() % p* l8 [+ U" V+ B S6 U
target=_blank>图像处理</a></td>
1 Z: m; n" P l: L <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 8 S1 L0 a1 B- ~6 q# N- P
target=_blank>网页特效</a></td>/ O$ g; D; x: O. Y; a
</tr>1 [( ]2 r- L |) s# Q- X& y
</tbody>
' o( E. X& z' r: G </table> |
|
发表于 2008-1-21 20:52
|