|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间9 X2 T( t8 t: I
<SCRIPT language=javascript >
* ^2 [) Q. P5 zdocument.write(
& j& {5 T% c8 Z8 O"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\) M* n8 G4 \' F* F' `
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");+ J& }+ E/ H2 O/ ]; E
/ X5 r# y5 v) u* Hfunction showtip(text) //显示链接的说明3 h& U$ S B2 F; d9 e
{
( h( S# e* M% a; m: b7 H. B if (document.all&&document.readyState=="complete") //针对IE/ m0 [9 c$ z+ E8 B6 L9 e" O0 b6 b5 U
{/ l6 J- o; o" X+ u& F
' _& ?& y6 W! ~% w$ a" l document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
: y( g7 s( x2 x0 a4 J document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
/ O, q# ?% G' m e8 ] document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
: f- r) E' _. E8 @- _9 Q9 { document.all.tooltip.style.visibility="visible";
& ?1 {& s: f5 K1 B% Q* d }* M4 C# C4 t- [' f( Q& i
}
/ L8 c2 h$ u/ X n0 Y3 y- H; ], r; `# w% Y6 ^+ p+ R
function hidetip() 5 v4 U& F/ L# m% K
{+ M$ @/ b- j7 p" R9 B* |, g3 h8 d
if (document.all)* L7 S. R4 q- R" B1 |/ i
document.all.tooltip.style.visibility="hidden";
0 ~: A$ U" }# q0 Y}
5 J: q7 q. i R2 n9 [3 \$ i
, K0 K' A0 A' ^- i$ o6 o2 rfunction setcolor(fntcolor,bgcolor)9 p2 m, m1 J7 g5 L3 j- D
{) G- z, p+ R ?' f& v) A
document.all.tooltip.style.bgcolor=bgcolor;$ Q1 }; U' ~& Q; x6 p, S
document.all.tooltip.innerHTML.Color = fntcolor;
( T/ C9 A: g+ ?}. c$ w( R' `% L/ b, {
5 V) ^6 X( B& H$ Rfunction showhint(text)
x3 ~% ?: t( X1 V+ r) c+ f{
& E' E1 f, Q% O8 N onmousemove=showtip(text);
, o+ S! d J% i2 W* q/ b onmouseover=showtip(text);1 ]6 G. U, T/ \8 U/ j( z6 K
onmouseout=hidetip();
7 Z% w- \$ @! A}
7 G5 }1 k. v) r$ T' Q: Q" i</SCRIPT>: `) ~: J/ n* M8 A: S
0 H3 a0 K0 Z. N& }2 N5 L n3 \0 c: L
2 G4 `6 t3 l; ]( g! t' p/ J% C
% D9 I* _: C: ^% A! [+ f j
( f5 v% } U) n2 A: p& [8 C! H$ C
# y, f' f' z9 Y$ z$ V7 W- {3 O
二：将下面的代码复制到〈BODY〉区
+ z& F5 c- f) r<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
) I4 y+ \2 ~( tcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">" z1 y$ r _3 T4 y
<tbody> & k. W5 h9 d2 U E5 h5 Y* c$ H
<tr align="center" bgcolor="#ffdfd0">
" s$ s( j+ b% }. e& m <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() 4 f n/ |9 x# ~( h5 s0 Q' e# F
target=_blank>赏心悦目</a></td>
: A$ M$ ]7 c6 B) F, m+ _ <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" ( a0 B3 ~ e% f9 e% k
onMouseOut=hidetip()>网页素材</a></td>, k+ h( y* _2 V f* N1 v
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() / ]8 _. ^/ A: t& b9 ^# E5 s5 A" d; l, E
target=_blank>图像处理</a></td>
; F5 }, A" N# K. v <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
+ L7 S% i* q% U: W target=_blank>网页特效</a></td>9 `+ o( p% A! c k# z4 X+ W3 T
</tr># z5 E# C Z0 ]' n7 u; M
</tbody> ' @. T1 n+ Y( \( B( L& M( t; C9 N
</table> |
|
发表于 2008-1-21 20:52
|