|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
7 ^3 n& q3 z" P3 D1 `( O0 ^<SCRIPT language=javascript >
2 i5 N6 }5 X% `# k$ G1 n+ pdocument.write(
; n6 ?9 w7 P8 B3 P6 I) C"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\+ O+ h% Q! Q, Z+ U* A
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
j" N) X7 V$ ?( J+ }5 c# \2 n+ k; ^" ]$ _2 u
function showtip(text) //显示链接的说明$ [" ~% D/ _5 q$ T# |& y
{
/ L; {' s7 m8 R. C if (document.all&&document.readyState=="complete") //针对IE9 J% h5 G5 F/ J3 I/ m. @1 h" A
{
. A9 u; s/ B" V6 s3 A - L2 Z: z/ T0 x7 e
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
3 \: [$ S; S/ p G. t4 ^' O document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;" `3 ^ J2 B' D* Q3 h ?, u/ \7 `
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;# n4 ]$ G/ ?; N" T$ F: c, r; A6 `
document.all.tooltip.style.visibility="visible"; P$ z' S6 b9 v) ~, X
}5 J4 z( L2 I* L- Z
}1 }& _6 d: p8 R1 A2 h" T
- T, d/ h* V" b& q: `% T" P
function hidetip()
0 u; T4 p* a$ ]6 ~ n! A) Z{2 W5 X0 M# ^# N+ E1 P9 g r
if (document.all)* u9 d) q0 W# Z" \
document.all.tooltip.style.visibility="hidden";
' \% W/ A9 ?3 \3 r}
. w+ I- u4 y6 _* E0 ^' W2 i
9 h, U0 ^( B$ T# B0 sfunction setcolor(fntcolor,bgcolor)4 d* G6 ~: M) s
{
4 C h% P3 y2 P2 o/ L: X8 j3 f document.all.tooltip.style.bgcolor=bgcolor;, p4 ^0 h: X8 A& U
document.all.tooltip.innerHTML.Color = fntcolor;; q3 {& h7 s; p% J
}
, h9 u y1 I! B% c4 \* J. D9 o- i
function showhint(text): B. F& j: [- ?# \* H0 E& F
{% E# l6 ^/ c2 K/ p1 \' i# p
onmousemove=showtip(text);( p% m9 O+ F$ B/ P# e; k
onmouseover=showtip(text);/ {) F9 h7 B' Z2 u" R
onmouseout=hidetip();
* [6 D4 S) a6 t$ ?+ u}. }$ k. m& n, S. K" e
</SCRIPT>- a; D$ q( C* i5 M* V# C
, n( T* C) M# _) n- h+ W
. G+ A( ^. U$ w8 \& L+ W% c
0 j8 \ n7 k) ]0 y2 [: g* A$ r" R1 a" R+ g" t# X5 G% G
- z; H1 i: E3 I. s, x' O! U
. h# n1 u. t e; d3 ~% M+ K P二：将下面的代码复制到〈BODY〉区4 I m$ z) b4 }- d4 W `6 D
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
- C! y8 e9 V! n: V8 Z* H7 jcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">! ^. B" h _$ A' ^
<tbody>
, p" ^& E3 B3 @4 g0 M7 a# Y; Y <tr align="center" bgcolor="#ffdfd0">
& |$ P) a% V$ }# Q <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
: `6 P% N! Y) ~ _; V target=_blank>赏心悦目</a></td>3 T" ~5 g$ a( P6 j& S. L0 l/ [( x: N
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" ! {% m0 B0 a) k; c) B, Z
onMouseOut=hidetip()>网页素材</a></td> P- d2 o/ y) }2 x1 I
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
' w- {* V/ F0 A& e* |% k( U target=_blank>图像处理</a></td>! Q3 Y' |; I. F0 [; A0 J% }
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 7 v/ R" T2 r* X
target=_blank>网页特效</a></td>
; i; w3 [% \( t6 J! | </tr>+ C% Q7 G0 L4 ?! n. _
</tbody>
7 l( A# I* q4 g0 b( P </table> |
|
发表于 2008-1-21 20:52
|