|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间4 G; t# L7 ?. B
<SCRIPT language=javascript >
% m: C u$ K% E. w! odocument.write(: E! L B3 W1 h5 {; ~( I
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
2 a1 d- L+ |8 c' N x n2 y;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");# F0 w: x) k5 h: n2 \
, O- B- |/ C% L' vfunction showtip(text) //显示链接的说明
5 B# c1 J H% M/ g! E6 h- h{
# f* v# B U. T j if (document.all&&document.readyState=="complete") //针对IE
- g; V8 h! \0 @& @ o {/ n% i9 Q8 I& g8 f5 V
: G5 s- Q7 G( `4 S4 T' m. n document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
( [: c5 z4 c5 l: _: e# p document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;# h3 l. M- Y! M3 K2 a
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;& G6 u$ J7 G" c+ W1 V
document.all.tooltip.style.visibility="visible";$ I- X" ]6 Q2 j
}
. h7 c3 p" Q. w& R0 x( z9 p8 `, v}, W% }3 g5 w) y. B7 ?' j+ X
0 }9 r0 B, X! V, y' `8 q# D
function hidetip() ! a7 h" U0 W( G/ b9 t6 Q1 G; }
{
1 O! m7 Q9 v9 ?6 F/ _if (document.all)
+ r* i0 q% y8 H# w7 v6 M. y% u document.all.tooltip.style.visibility="hidden";
: U! S9 S% x. [}
; M- F5 U; \2 W4 a8 S
; [9 N# U7 m8 U: X6 J7 k$ ffunction setcolor(fntcolor,bgcolor)1 }+ y K) N0 S; {1 y9 P7 J" ~1 E$ }8 ^
{
8 v4 T1 S( D: z9 ?* } [+ [ document.all.tooltip.style.bgcolor=bgcolor;& i( `, v3 a! ^/ B
document.all.tooltip.innerHTML.Color = fntcolor;1 u2 C& M! X) i
}2 |; F" x' b& V; m1 \
2 Y/ {# j% q% }1 U vfunction showhint(text), R, C2 W( F$ K
{
' O M+ p1 P/ f7 m4 \- H- K onmousemove=showtip(text);
/ N. R- I f8 K onmouseover=showtip(text);
. |1 \7 B& i' n onmouseout=hidetip();
8 z: L! U. @8 y8 ^* b}" B2 [$ B9 o4 r' Y6 ^' U) ]$ L5 C
</SCRIPT>
+ f, f) y7 q$ U1 G
& `9 w) W1 D5 ?) Y U( j8 }) D& `" q/ p! x8 G! a
. d, f' K" ?4 t% W# m! K0 l
' n4 k! T6 j+ b! b7 d s7 s. Z, ^+ @2 L, S6 Q& k% X1 G) k; N
1 \: p+ }+ D/ |' L+ G
二：将下面的代码复制到〈BODY〉区
; E% \: B1 @" m6 ]0 I<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
& g. G3 T$ @6 r/ ~7 W Ncellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
$ c( [$ V O" S Y' _* c <tbody>
) Q. V; |+ D) R. e9 Q) M <tr align="center" bgcolor="#ffdfd0">
4 Z3 s9 i: D2 \4 o5 Z* ~ <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() / C) Z6 i0 E$ R, ~4 _9 M4 Q' t, e
target=_blank>赏心悦目</a></td>
' {% I% P: S; ~5 S) k2 Z4 W <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
7 R ~* y- p* Y onMouseOut=hidetip()>网页素材</a></td>
* I0 B4 o* X* G H3 t1 L" i9 ` <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
0 d' g$ m( e, ]0 \/ K target=_blank>图像处理</a></td>* F& w$ _: Z- A4 Z- d! a; W$ D
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
4 v G# y( {9 j& S8 r target=_blank>网页特效</a></td>* v5 @6 A: z6 }4 W4 p$ a
</tr>
6 T" b' b Q v </tbody> 4 ~. Q; A( J& x+ A5 s
</table> |
|
发表于 2008-1-21 20:52
|