|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间) H2 `4 q% J# ` S0 c# L1 ^" I% H
<SCRIPT language=javascript >
' {9 Y$ x5 H- `& I/ G+ Zdocument.write(
" m3 d; j) n8 a. z& p2 i8 C"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\- T& \# w- [! S q- \
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
- T) m: h4 m9 J* L. R& g4 t$ K b7 l1 P6 n: }, _
function showtip(text) //显示链接的说明* b; ?& q* m/ ~# g
{7 T% B/ _8 ~1 N8 Z
if (document.all&&document.readyState=="complete") //针对IE g9 t, k$ f* ^
{
9 m( w4 @4 F5 E }3 q
. u' e, X$ v: x. b; a document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
7 S3 ^9 f4 q; q- D& o% I5 f6 Y document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
. u' h n( z5 m5 C) Y document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
* O- B+ z7 ^% [ document.all.tooltip.style.visibility="visible";7 p# y. V* R! r& y, M5 A
}
; U9 q. W: {) t. N d: [}
+ d+ q+ C0 K* _( a1 _
$ j6 F, h- s0 }function hidetip() ) ^. n, y2 \; y( A( _
{3 H# D# n( ?% x2 Y
if (document.all)
( d/ y5 |0 ^! s( U5 D document.all.tooltip.style.visibility="hidden";
% x; j3 _3 Y1 M: e# D: P+ a8 u}* o# Y& e% y# X
- p; H/ Q: V8 y0 e. A+ b
function setcolor(fntcolor,bgcolor)& Z/ @6 A* s, o0 c3 U0 V5 }
{: j+ }# W! H0 t
document.all.tooltip.style.bgcolor=bgcolor;
% S" A1 N0 o5 A6 | V+ d* l document.all.tooltip.innerHTML.Color = fntcolor;
4 n& h" A# _0 Y1 g/ s7 L% Z}( R; n) P2 L o: `
" H8 C2 u, a7 l7 I* P
function showhint(text) |) i4 W) |8 W0 u3 j
{
( C2 E6 P6 o0 ?5 q7 S onmousemove=showtip(text);6 M: B# m( p% J+ y s9 S, q
onmouseover=showtip(text);' h1 x7 l5 w/ W8 _! N3 t
onmouseout=hidetip();
- k1 U' c; c9 e, B}* V& Y h9 R6 N1 _
</SCRIPT>/ S' M `2 X3 u& f: `0 u3 b; A
0 y* C' ^, I) w1 c1 p/ N8 b& o8 ~, B+ {; s, @% V. L. P
# n6 D, ]8 h6 Z* I5 i2 k
# i4 j: e7 N. R4 F5 c$ Q* u& m
5 J0 y; f( S5 c+ u! v
4 y( |6 C4 Y$ z" [: Q* T# K二：将下面的代码复制到〈BODY〉区
& Q+ Q) Q. o- B0 x4 a- {) K% P<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
6 J, e; V0 W& _ v9 }cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
3 Q( ^- s% x8 K6 |$ F' n <tbody>
7 Q! i3 Y' y3 R' v% ~$ Z& a! L( V7 u <tr align="center" bgcolor="#ffdfd0"> 4 @8 X* \! A0 p7 a9 x; q# e
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() 9 e [$ r9 s0 P; U) K+ B
target=_blank>赏心悦目</a></td>
5 |" w; W- l$ i& g4 u0 }! t6 f <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" 4 a) \4 `/ ^; _0 G5 j! p
onMouseOut=hidetip()>网页素材</a></td>
5 g5 d. {9 Z1 q. x& X ^+ E <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() 6 y5 H, X; D; x( ]
target=_blank>图像处理</a></td>
3 l; {* h$ {8 s) u' A6 L$ O <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() ' @9 P& g$ K8 x( X
target=_blank>网页特效</a></td>. i- U5 n& ?8 f! l' n2 ] t& D; B
</tr>1 v' R+ f; C- C' S, D: L
</tbody>
' a. W3 ~6 O# C4 x% I6 f </table> |
|
发表于 2008-1-21 20:52
|