|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
5 O9 Q6 i7 D( J2 d5 D3 l<SCRIPT language=javascript >
8 l+ U% \. ^% G j! Z+ C0 a2 t: Ndocument.write(+ m8 {) G' a: ~+ |7 u2 \- i) v
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\ E; a! z2 H) x4 [/ e
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
! e0 @5 _4 d. c, b! K' X, g
$ U( {) `2 {+ c3 x; D$ P2 Nfunction showtip(text) //显示链接的说明* i' R1 I! v8 e: b2 L+ X
{
" N) ?8 ~" j9 K/ {& {- @1 A if (document.all&&document.readyState=="complete") //针对IE
c- z" ^8 L1 `) {5 b {
* Y, N6 e6 T5 \' z5 }+ b
' H; A8 ]- J. L! C document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";: ^' a9 T( Y# w5 `* P' n
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;. F; X/ B I# K* R# `5 |
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;( I# A* _9 j% E, U) j
document.all.tooltip.style.visibility="visible";! L+ R7 D- l; u ?7 {# k4 p# O( Y
}* @7 o; \- Y, W9 P2 ~: G& a+ s( z! s
}, z" F2 V) ?) L
* S! E0 H. s) w' ]; Cfunction hidetip()
B0 _2 M R, K5 }{4 x2 d4 W& v3 t* j
if (document.all)
; L4 |/ ?4 c3 |; C2 U) G6 h document.all.tooltip.style.visibility="hidden";. l( I% j/ R; u! }2 [, c2 @& H
}
8 ~& o# y8 u4 x) B, `6 {! B$ }! I X$ m6 P! m* C6 T
function setcolor(fntcolor,bgcolor)6 ]( A3 W! ^) `; e. d+ D2 f& T- |
{0 h* A3 D6 o- Q. O! f
document.all.tooltip.style.bgcolor=bgcolor;8 I2 a: }: E; Q
document.all.tooltip.innerHTML.Color = fntcolor;2 V; A- @' b# Q& P$ e, W
}
. m; W& _. D, a* V. B/ Q. T3 C; @' ?$ a2 g* n. B
function showhint(text)7 T/ w, x* r3 k' O
{
: z* X3 C0 e1 L& o0 g$ |) U% A! T onmousemove=showtip(text);
/ B6 F$ q" x! A' {/ U4 P* y onmouseover=showtip(text);
& T1 h$ [# z8 [ onmouseout=hidetip();0 x2 t/ i: C+ N/ T8 m
}2 y- `& R! {- h0 C8 a- P
</SCRIPT>5 [. I. E! n- J
) R& i9 o0 X3 E5 ]% L, g; }
2 S, \3 ~$ q$ }; `! O6 W+ n2 l/ l: E/ @5 @
9 l( l# T, k! k1 r3 \( p* A( ^, j( R% z) p8 l
4 b z" I9 K1 N' d) ~, S! N
二：将下面的代码复制到〈BODY〉区; I' d# Q7 N, \- [
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
2 _& w3 D( E1 T) g# ucellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">; S# p9 l% m5 A# d: P/ K Z
<tbody> . F/ G' n4 ]5 _: e) Q9 A$ w
<tr align="center" bgcolor="#ffdfd0"> ' z4 n( C6 B2 T# m1 p! j0 W, t
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
9 M3 D. C' b7 x1 h target=_blank>赏心悦目</a></td>
1 G L- y& m+ `' a6 | <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" 9 X0 Q% U1 M7 [4 G1 I
onMouseOut=hidetip()>网页素材</a></td>4 ]- ^% N9 P }8 V
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
' ]' b6 ~, H, v target=_blank>图像处理</a></td>
" f5 T9 l9 L! Q* G! }* } <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
\ F& y1 w s3 C/ y target=_blank>网页特效</a></td>/ N- Y$ L$ c) z$ H1 j
</tr>
2 k: c$ B2 e' ~1 X </tbody>
4 ]2 i4 X2 j# T ~, v$ D4 f </table> |
|
发表于 2008-1-21 20:52
|