|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间, Y3 C( `! f6 f0 h2 e+ ?# p
<SCRIPT language=javascript >" q4 G. n7 j6 K4 |, V: C# _ }
document.write(
( m4 |* H1 l/ P6 [2 G% J* x"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\6 U q% {' G$ l1 J
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");* Y! \9 V9 Z [* ]
/ f0 m0 C. l( @, ]! T0 w5 v
function showtip(text) //显示链接的说明. ]* u. @- M' b6 ]
{: R* f6 l' T4 _- w5 {& Q; ]$ [
if (document.all&&document.readyState=="complete") //针对IE
5 E+ O- r- {' z {
: \: S. d4 o# ? P( [6 B% Y: h ) s9 {) V, d+ w/ \
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
7 p' v( O+ A" o2 j1 J document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
" u! N- a( k; t6 Q3 e4 P2 a: | document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
4 R/ F, M1 G% ?) o/ P6 S: t document.all.tooltip.style.visibility="visible";! v' j0 ^6 ]3 T6 R {4 ]1 b: r$ z
}% S1 ^$ i/ \' c# z' \2 B0 d
}( A: r5 s+ Z0 P9 Q0 d% E
7 p2 J8 W. V: s; ^7 } x3 a
function hidetip() 2 |4 C, `: m9 q d# u m! }* n1 l
{
* t4 A& [5 }7 T6 @7 y6 Kif (document.all)1 U, ~" a0 ?7 z m5 B% A
document.all.tooltip.style.visibility="hidden";1 h( Z! q# ?2 Q
}
; q) R4 S. m7 o3 o
. u% `5 Q% x$ V. k1 I/ qfunction setcolor(fntcolor,bgcolor)! X8 K0 O0 Z) B" H
{
% Z* `+ X9 X0 y, X% Z document.all.tooltip.style.bgcolor=bgcolor;
6 n6 l" Q9 I+ ~. \ document.all.tooltip.innerHTML.Color = fntcolor;
9 x$ D' c+ w6 @2 j* G& [}
7 K* ~( [8 u( q8 w& @
6 D* @ C0 K& w1 [6 T Dfunction showhint(text)/ u' y4 B* z9 a+ \
{3 Z& X* x% {4 G9 `( H3 E: D
onmousemove=showtip(text);
4 Q9 a1 p2 d1 z* {& I onmouseover=showtip(text);
& j5 n9 z+ \2 ?, W# B onmouseout=hidetip();' ?7 c8 I4 ?6 g" T
}; k; d$ {3 v/ o: ]) ]9 Q
</SCRIPT>
" _0 b( d2 u6 P4 Y+ x7 D3 b1 [, \% {0 \' K: ^; s; J7 c
0 g: o, X" w' Q) e; U0 P# a! x) E, _! J, {4 R$ S
& Y0 Y$ D: x* P+ ^0 Y/ h4 E4 g. e" i& T9 e
$ N! c |9 q4 [! s" C4 v0 \
二：将下面的代码复制到〈BODY〉区. A, ?- p) e$ Y! N8 p7 r+ E
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 & F6 T* _7 R6 s, [ V' H4 S: K$ ^
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">1 Z; d6 k& e2 r3 Y" v
<tbody> 4 o. J3 p) P( v, M* j( ]
<tr align="center" bgcolor="#ffdfd0"> 0 W# @8 v- r4 C+ K
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
n1 V) K6 w; C target=_blank>赏心悦目</a></td>
6 V7 e& r- G$ } <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
7 o' ?" Z/ Y6 X9 Q onMouseOut=hidetip()>网页素材</a></td>; \- ?) P2 l/ e7 ^+ |
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
( E3 h$ w0 S. k Y: \# W6 v target=_blank>图像处理</a></td>
' N. U6 \. {; E& y3 z' u" E <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
) ^' V7 }, Y6 w# ?8 N% ^8 H! [1 B target=_blank>网页特效</a></td>
P7 `) u C. @) M: r ?1 z </tr>
/ D W) g4 A! O1 s( J2 I4 [ </tbody>
. Q* n- i& U8 U8 v. h </table> |
|
发表于 2008-1-21 20:52
|