|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间; [+ V! h9 O( f% q
<SCRIPT language=javascript >
- F- [% p+ u% z$ R ~document.write(1 N: ~0 @: y5 [" b( X4 T# L5 s
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
# e" t( p$ r) p4 J4 K- H;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
# h+ c2 |* N' W7 R9 c( p* i% B9 e6 ] X0 R
function showtip(text) //显示链接的说明1 @/ T% k! R$ ]3 o# J
{ Z7 k# X" i9 a6 B0 g0 c
if (document.all&&document.readyState=="complete") //针对IE
" k* t# L3 M1 C6 M+ S. }/ g F {: a" f. S p" M! u5 \
0 D3 o& T1 O# l# T @
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
0 _6 f8 Q1 w$ q) S6 n& u document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;3 W8 N/ y8 H& _* f( ?
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;0 q0 W+ ?, M( E) }
document.all.tooltip.style.visibility="visible";
$ @4 e/ }1 N* `) p a. [ }: X0 ?1 ~: _( }! X+ T
}6 v9 Y( `8 f3 g' R, R2 f/ A
- i5 S: H5 B1 I+ g. p" l5 d
function hidetip()
# g7 J1 b+ I5 j* u- c( h{
4 y! a! s+ @& \) y$ _- oif (document.all)' I( ?0 F7 \- ?- ^) T. D* U
document.all.tooltip.style.visibility="hidden";6 W5 w$ |2 N' U* q# B9 ]
}6 z; i O6 n& d6 J3 x
" Z0 v1 p, \ u
function setcolor(fntcolor,bgcolor)
5 ~' H) G0 c) P0 i; c0 q# ]3 _{
5 z: ?% z! n0 P1 S. q9 U document.all.tooltip.style.bgcolor=bgcolor;
5 ^$ a- J) L& B* B# r document.all.tooltip.innerHTML.Color = fntcolor;' T/ X+ o: D) \& C! Z
}/ m7 Y1 x9 o& _. ^# C$ O
w$ e: h7 ~* e9 o/ q6 v8 z, e! [function showhint(text)
7 {& J- L$ [4 N- g" E/ ~9 q K" u$ c$ P{
5 k j! j0 A' G( [6 r1 _2 O( ?6 h* n onmousemove=showtip(text);
- n2 R: m; D' f( X! H9 N- D6 F onmouseover=showtip(text);" \6 I9 O7 t3 w8 i& `( K& `
onmouseout=hidetip();
, @9 a4 v, ?0 f% x' f}7 C4 U& ^# g! \, j
</SCRIPT>
2 A" x7 x4 _1 o- D; P) Y, r% e. e
+ c# g+ Z" N* z. D D' c8 O: [' Q- Y2 @* e$ ^8 L6 q: k
" @* a5 Q' F( o1 z
. A3 ?) ?/ [9 J
, R) q$ O2 h8 R5 r' q5 ?* x$ j0 E9 r7 @# V0 K, S) H
二：将下面的代码复制到〈BODY〉区- X5 I9 L" h/ o# S# k: H
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 & E' u G! k2 s' r+ o
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
# }$ M7 I% V+ N( J" ]. k# ]1 a- L( H <tbody>
" j5 o9 J% N7 e <tr align="center" bgcolor="#ffdfd0">
9 ~4 h- o2 p: [; v% T3 a6 J# [- Q# u U <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() # k4 V3 i$ g7 T- X* P
target=_blank>赏心悦目</a></td>6 L7 d$ l; s! A/ j( C
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
) _6 f. j" r$ _3 l& h1 h onMouseOut=hidetip()>网页素材</a></td>, K1 I, n, b3 o# T
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
1 ], C3 r" s) F target=_blank>图像处理</a></td>& L5 p3 d& q$ J# i+ A X, R
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() N7 e& _# d' W7 P# B9 c3 ]+ W. p
target=_blank>网页特效</a></td>! \1 v+ W- V. w5 f2 F+ q3 E+ y
</tr>5 d5 r: e2 k+ P! C7 g. C8 I
</tbody>
# q8 ]( T$ L3 M$ a </table> |
|
发表于 2008-1-21 20:52
|