|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
; A2 o( Z6 B% ]9 ?, `<SCRIPT language=javascript >: m) o5 t0 ^! ^9 U
document.write(! l0 j7 {* a- ^
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
7 g/ p4 f8 T1 p: {# s;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");" \7 I4 q0 I: N$ m5 E
8 G7 D/ r$ |% E
function showtip(text) //显示链接的说明
) M2 D& E* s3 {5 Q{ G" F& y9 Y. v: L2 y0 t
if (document.all&&document.readyState=="complete") //针对IE! [' f w1 A: n2 F" B9 o- x
{
' k! d3 `) C4 J8 G# `* v6 h2 D - u' o/ q' ^! o$ Q) o! F) Y
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
/ r2 E( t7 |& P) K. n3 I) Q5 y+ j document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;% e9 n+ [$ {2 j$ a1 A# M3 I
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
& N; G# \( p: T: I8 j document.all.tooltip.style.visibility="visible";
) @* [6 | T+ }9 v @/ u }+ E6 i6 \6 y9 t# P& Q& O
}
* N: s! o* v% K3 `7 v1 M/ P2 i
- `/ Y7 C" ?& h1 r! T3 _function hidetip()
8 x$ j3 `" _7 \% p0 _{
4 c s/ `4 {3 } T" Eif (document.all)$ d( b. x ] Y8 y
document.all.tooltip.style.visibility="hidden";
6 j, X L: c* M6 d; ~8 Q& J& @: i}
3 f) V3 j6 ?) B* E4 c9 |% }$ F/ [0 p" R; ~* b
function setcolor(fntcolor,bgcolor)
/ N% t% C/ I& M6 v% W{2 j% |0 Y! u- J! `5 J3 F
document.all.tooltip.style.bgcolor=bgcolor;
' H, \9 X! r1 v document.all.tooltip.innerHTML.Color = fntcolor;% l7 d+ C. s! ?& j4 s) A$ L
}
: A" K- n% m9 ?8 j
5 q9 v9 Q9 z# `: L" zfunction showhint(text)) B0 t; q, k, x$ f, i ^* A a- }
{
% }1 {- r- A1 Z" o2 [3 D' P. t/ } onmousemove=showtip(text);
' O b4 C" U. N" N9 n# D' i onmouseover=showtip(text);
. h4 V: L% c' n& N) U' c& }3 [ onmouseout=hidetip();
s) g& i6 X$ i5 ~4 i3 c}4 {, X. N3 \* \1 R! V4 B O, u
</SCRIPT>3 c- W) i7 c& ?! O; T' Q
& X, e+ L6 [. v0 G7 b
) C5 A9 ^5 }; b' Q6 e* p% @4 N3 L' `. Q3 y: }. _
$ C# L K5 G% ^# _( y. I$ a% ^8 Z0 K+ @( K7 `/ T- B
$ ~. B: e- q8 N7 F5 j( G
二：将下面的代码复制到〈BODY〉区- B2 Z( U3 `+ e, S& j
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
3 E9 E! c- ?& I% G+ Qcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
' ?( S& o$ }1 g( e) [; [ <tbody> , c: @+ [& U. w6 [7 [- E
<tr align="center" bgcolor="#ffdfd0"> ! n- Z9 q4 m: w9 F# q2 e, O
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() 0 _$ W6 u, Z2 r
target=_blank>赏心悦目</a></td>
8 \3 w# T1 i! b( u; h$ a$ P( P <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
* }8 h2 {# n' Y, ~0 ?& f onMouseOut=hidetip()>网页素材</a></td>
' g: b# P1 U, o9 U: z/ V& R <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() ) E/ |2 ]# N, g, g$ M- B" L; P
target=_blank>图像处理</a></td>2 J. w: Q0 v0 {6 z5 j" {
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() - Z& Z Y; D& V" y7 X6 I
target=_blank>网页特效</a></td>
3 Y" J" v4 T6 X i) [' B </tr>! b) `3 ?' W" q
</tbody> / u6 }- I: P+ J' B1 Q! \3 t
</table> |
|
发表于 2008-1-21 20:52
|