|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间9 ~0 ]* U9 N2 ^
<SCRIPT language=javascript >" z% I9 o( h% [" ?' A
document.write(8 y1 d8 M) l% D* @; E
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\9 q+ }/ {- y* U/ z
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");+ X- O8 ~8 `. }
5 T% t h' P" z
function showtip(text) //显示链接的说明! ~4 d& | v+ A3 `- O' m' ]1 S
{
2 @* l$ j+ I' n- Z2 e( K+ H% Z ^ if (document.all&&document.readyState=="complete") //针对IE
1 v J* r# _! s" z3 Z: r9 \ {5 L0 \0 n n; G$ M: {) C4 c4 U$ k
- P+ q1 C3 M9 C4 I
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";" d0 H: l0 R4 h5 `4 Z
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
# w6 m1 O( m0 {2 o# Z% P document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;4 Z; X G& b% m
document.all.tooltip.style.visibility="visible";" n I0 K2 o+ W; g( Y1 V
}
" h; S4 G) \4 `1 E1 g}
4 G2 V4 x% w8 k$ I/ k) I! I% ~ d/ s: @, S3 J5 `# T, M
function hidetip()
+ b7 k& @5 v, a6 h$ W1 `{
+ @9 z5 \: B5 b, B1 Z- Sif (document.all)
9 Y3 `$ M- H/ y" i document.all.tooltip.style.visibility="hidden";( J/ B- I" I! r" i+ r% T
}
" |: d V. Y" S* J9 v
7 v4 z1 B; R% L0 T4 vfunction setcolor(fntcolor,bgcolor)$ n* B# Z- W5 S, @4 q$ \$ U
{
/ f u. `3 B B- O+ I8 i' L4 k+ t document.all.tooltip.style.bgcolor=bgcolor;, F4 _1 `; I0 N) Z/ g' B. R# h
document.all.tooltip.innerHTML.Color = fntcolor;# e/ \& [+ p. J) t. N7 l
}) S* l5 A& ~: ~6 T
$ r2 ~2 }* U: I% o7 L$ L
function showhint(text)% G% o& j7 i8 H u, N; X
{
6 i& h' l6 R' t/ \/ L8 G3 v onmousemove=showtip(text);
- x$ s7 S) [, n6 b" O( \! d" M$ i onmouseover=showtip(text);/ W8 n' N! {/ s& \2 l
onmouseout=hidetip();
" U" q1 b/ p& L) @}* a& D+ \: c4 u+ X, e
</SCRIPT>
. _+ e, o2 r/ |; G
. Q! ?' k6 x4 t5 a; Y
$ B [/ B5 [* Z3 k$ o% E; h9 u( |1 @6 n/ A, u$ `
) V. i, d# S/ f" D; `" V9 ~& l. X' |4 f3 _
. o: m; v) r0 D" {# w3 u; ]二：将下面的代码复制到〈BODY〉区
9 X! Z* h, E. a& x# k A7 t<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
1 J4 b; n. u: }" Fcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">& x* Q1 s( r# K% E$ W. r* X
<tbody> 7 @0 g! j; V6 F/ Z: E/ a
<tr align="center" bgcolor="#ffdfd0"> ) u, `$ ^3 q. `: W) d" D
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
2 H7 n. i' ^% c/ F1 x& d$ u2 X target=_blank>赏心悦目</a></td>2 w; i9 h; f7 V9 a
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
9 `2 g! S+ }* ^0 U( z onMouseOut=hidetip()>网页素材</a></td>8 s1 u' `8 Z0 l4 n! N: b+ S
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() % T( h( S$ u* S( Z% }7 d' k" T+ j# |. ~
target=_blank>图像处理</a></td># t1 N( g7 @; q
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
7 h+ x R1 y" c; B: o) b# m0 U5 ? target=_blank>网页特效</a></td>
& Y% J G0 l5 P+ `# C# w </tr>
1 e O9 P1 V0 s </tbody> 0 |& n; v4 r" [ t! s% l
</table> |
|
发表于 2008-1-21 20:52
|