|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
3 c, \) l+ G( ^. Q8 E& N' p' d<SCRIPT language=javascript >
: ^2 `6 B+ h% y5 P- @document.write(% x- |& D! Z. s
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
7 M5 q/ G+ C6 B- y% O* p;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");# L; k8 }, c" L! S' D
8 ^+ ~2 g9 b, f0 W5 o7 f5 x* U# a4 L1 Q wfunction showtip(text) //显示链接的说明( _! `' `# M5 H
{) F; ]8 D/ g+ f# t4 }" [6 L
if (document.all&&document.readyState=="complete") //针对IE
# ~ P8 ~5 z% B+ ^, T {
* R: r- c( C2 I7 D) K : }. T y5 L$ ^/ Q
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
0 K0 U3 J, g* }, y document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
! T3 s' P- @9 ~8 z2 c7 B+ U R document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
0 X8 }# P3 c s6 t$ g. z document.all.tooltip.style.visibility="visible";) H* k8 j; g' e( Z, Q
}" s, o" T, |. F8 Q& @/ W; @% n. b
}
2 M, w+ z" ]( M7 U. c! ^5 B5 L5 `" n6 v- Q# o+ I# A
function hidetip() , _; o) W5 K# v1 [$ p
{9 N0 y( \8 M, f) B) X4 T
if (document.all) @5 E7 y1 \, A9 r0 [8 X* P& L
document.all.tooltip.style.visibility="hidden";
& F: E) x) Z- Z8 M) R+ L}% j, Z- O6 v5 z- P1 Y' ]
- T0 S) h ?4 h! [/ A; m& k+ R- n
function setcolor(fntcolor,bgcolor)
8 M" _6 S8 x2 G# ^* w' p{& p7 c6 X9 A% W) k6 ^$ Q
document.all.tooltip.style.bgcolor=bgcolor;
' |' \) O* i/ K9 k8 J document.all.tooltip.innerHTML.Color = fntcolor;/ E: a) X* \9 R/ N6 r1 r4 Y) O$ G
}
3 |& K1 K2 `% y
3 l. Q @1 b4 B0 g. F/ w' m dfunction showhint(text)
6 ?+ N$ Q4 i: p6 a1 F7 H4 m{, K1 ^' x& X: Z
onmousemove=showtip(text);
$ J: h* ^" _8 q$ f4 t8 \" i onmouseover=showtip(text);; v2 o: X0 H& C
onmouseout=hidetip();
# c# R! |( A/ ^6 {0 T- O5 w Z}
J6 t( o6 I9 q+ W# L( F4 i3 X$ [</SCRIPT>
8 n& q( g1 |* l8 A& c& H( E
( o8 J/ d3 A7 A, E
/ z& T, }" u2 t* s! `0 ~ V# H* R$ f3 a8 s4 N: D: r
, X) e8 \0 A% a; T0 J, ?. y& M' [# K2 c0 \. p
4 ^3 ]0 ?4 H8 o+ X: m- n
二：将下面的代码复制到〈BODY〉区4 r- h2 [+ d7 ?2 A5 c/ H
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 + K' U" j( O; \0 }% P8 ^9 }
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">, @' ^2 O2 q5 b1 L' X
<tbody> 8 w2 O+ p& r9 i
<tr align="center" bgcolor="#ffdfd0"> 1 k8 ?( q" M# v7 w9 i! t
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() " d6 t4 U1 R! {1 u( ?6 F" q
target=_blank>赏心悦目</a></td>; V' a/ m) C: W+ {; Q8 Q, F
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
% h6 o; i* \/ ?! u6 T4 B9 [: A0 j, q onMouseOut=hidetip()>网页素材</a></td>
! J, O) P8 [: Z# P# N <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
5 \0 E- _" P0 F' h' D( g g target=_blank>图像处理</a></td>
. N9 v8 x1 H! M* S' i& X4 K <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() ! K) W1 G; ]- m7 e# w4 p
target=_blank>网页特效</a></td>
& G7 i/ w7 ]8 a Y4 d </tr>$ Z3 k g$ R2 u* [( b9 P5 A4 E
</tbody>
+ ~3 I o' M4 `3 O& \& B% P! n1 ]$ k </table> |
|
发表于 2008-1-21 20:52
|