|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间2 @ V( B" [; _2 ^1 a' J' O
<SCRIPT language=javascript >
8 P2 |: i6 ~( n( b+ z9 o# wdocument.write(
/ i1 N& W2 v+ b" `" W: o% d"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
7 d) {& k! P+ L;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
0 o3 f, N; B4 [8 l9 }
# C7 A8 a3 H; Sfunction showtip(text) //显示链接的说明1 ~' M9 M; `! X" g: P
{% w9 D& c, g& \* Z( b
if (document.all&&document.readyState=="complete") //针对IE1 U$ N% m* {7 c9 p
{: j+ k0 c1 S n. k0 l9 t, `: A
7 K& K; t0 [4 N' j document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";6 Q# Z, O# P" c, ^% y( E
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;+ M3 h5 _7 k- S& o2 {! E+ r" x
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
8 N5 f# o; z) O5 K; ~. B8 R7 Z document.all.tooltip.style.visibility="visible";
6 z+ q# R5 z O) S7 D+ K }7 ]+ F/ J! i X
}' Q. @, k' L+ k3 J6 O
( `( P7 y4 L: F. }+ x" N+ Mfunction hidetip()
0 J( [* u0 C6 O2 ]9 L{
' [- m. z4 U' ~/ o3 `# T5 R+ z; f" ]: Eif (document.all)
$ L' N# \! H' N, f! _! q* H& _. H0 u document.all.tooltip.style.visibility="hidden";
+ F; a7 F, `2 M) E9 r7 C}
4 o0 G4 t, }2 A% a$ V. h* V
5 Q9 c) X8 w6 b' ~4 [: |/ A3 {function setcolor(fntcolor,bgcolor)
, M/ d) u b6 L( x' t+ A t{
( X9 E/ T* N8 n/ _; k, u document.all.tooltip.style.bgcolor=bgcolor;
% X& c3 D9 l! Z0 x document.all.tooltip.innerHTML.Color = fntcolor;
* V x$ N7 k# Q: S* Y2 \}
* i8 P$ f) k% _. M: _' H
7 L9 L& \1 r. C( a8 C; {function showhint(text)8 F. U n3 Q3 ^5 w% a3 B V
{* g; O" c7 a$ \8 e. L1 c
onmousemove=showtip(text);1 x6 O4 ?( q h1 r# ]$ b& U
onmouseover=showtip(text);! I& ? R7 y+ o2 V
onmouseout=hidetip();7 j% i1 |) A1 H6 C$ K- e
} _ P* @: G% u
</SCRIPT>7 H) _9 N& Q8 P- G5 h! t0 S& R
; u* F r6 o- _* _% g# ?
! e1 q5 Z$ t" W. `" o: Q
- n# F$ Y) ?& Q3 {/ v8 s3 e! O7 x; c4 h, j% D1 z
0 ^/ r# z: t& v2 r
( K! _+ x8 h& D3 h7 r, i- B" Y
二：将下面的代码复制到〈BODY〉区
' e- b7 K( r, k/ w<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
( D& C; j% S* H0 G4 b! I- n3 f- Icellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
3 S9 N7 b# y+ l& z w A! s7 I <tbody>
" \8 u1 N8 H. d' W <tr align="center" bgcolor="#ffdfd0"> % i2 b/ n0 G% q2 ]
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
1 X' M7 c- {& _( M* f target=_blank>赏心悦目</a></td>
2 l& Y, ?, D4 V8 P! r <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" G9 Z1 J9 _% h, H0 y
onMouseOut=hidetip()>网页素材</a></td>0 |- P4 q9 [8 c2 k3 _
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() * g) p1 ~ @2 t! `0 }) B
target=_blank>图像处理</a></td>* L3 W$ ?, t2 ~8 u0 {
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 6 B# ~! o5 ]' R3 ?
target=_blank>网页特效</a></td>( [1 Z7 d5 ^8 M' d _+ ]! q7 E, w# `
</tr>$ c7 A* G- H6 ^4 d
</tbody> - ?; L2 w r: w; R2 a
</table> |
|
发表于 2008-1-21 20:52
|