|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间6 U& X# b/ N! X* A
<SCRIPT language=javascript >
6 Z' z" w2 I& N! g* A" y* Vdocument.write(
! t8 A9 U" @4 K"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
3 F+ f' a9 z/ C1 O( Q! |;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
3 O' b1 m9 z, h! ]
2 L+ Q. J" F% [. k5 X6 ]6 A$ Y1 |. h: \function showtip(text) //显示链接的说明
$ |) a; O+ O2 O% H7 V" ?9 O5 r4 T{ _- |! i7 x8 [$ V
if (document.all&&document.readyState=="complete") //针对IE
* a. `) a: J# U5 G/ Z {! x" a! j) O/ e* `' ~
) b5 _0 f b0 j' E3 j
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";8 Z0 B- m& A% g
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;3 g8 l* q! M3 i" G8 _! N- n
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
/ [6 ~$ U9 a7 G$ Y2 i document.all.tooltip.style.visibility="visible";) [* X1 r/ m" a5 y, e8 N, ` E
}8 Z' x7 x; U1 q
}( `9 C I; Q S0 d) n2 ~
2 P) Y+ z9 t& F2 D
function hidetip()
1 G/ `* i, @# v7 k/ a6 _{# ^8 p- b( a6 _+ p) F+ \1 f
if (document.all)* Y4 ^* i' U* _+ l) L) E
document.all.tooltip.style.visibility="hidden";
; V: A0 |7 q1 A}
4 ~4 Q' g) s/ _* @* V6 o3 B4 R) R! W. P7 Z [3 f
function setcolor(fntcolor,bgcolor). }8 e; K) u1 B( d0 s# B6 Q' M
{
- u% d6 P. }* ^: |( X: L document.all.tooltip.style.bgcolor=bgcolor;& J+ S! {( Z0 t9 q
document.all.tooltip.innerHTML.Color = fntcolor;( m- B) X* ~) j, L* A! E# _
}% G4 B% |1 o% F; E/ g7 d- L5 k
& X% B5 N* G' I! f$ J7 k
function showhint(text)
! l6 Q" \7 `9 k) z! r& D- ~{
; k6 L. z6 p- F% ~9 B onmousemove=showtip(text);
% {7 N! {( v% u0 S) { onmouseover=showtip(text);+ ` ]: \8 U: T/ }
onmouseout=hidetip();
# i. R3 F# I5 a! y) Y o1 s}" W2 X; }8 N5 ?4 N; l
</SCRIPT>
, u9 v6 y! T! e( @0 C" r5 W2 o3 Q0 p: \
+ ~* ]5 u3 w, q: V0 H3 G3 U; R1 b: ]# ]9 R/ y+ e6 A
+ o+ p2 Z8 R& x8 A' Y( d9 w$ ~# L& d+ N
7 m+ w. c, {. ?4 ?二：将下面的代码复制到〈BODY〉区; a7 B2 I+ Q& p/ m1 ~
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 ; O( l8 }4 V2 ~, \. R, ~
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">) P, r7 U2 p- W& F, |
<tbody> ! z7 V/ M) {+ C0 L
<tr align="center" bgcolor="#ffdfd0"> & A* ?9 I8 a# w; c( i ~
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
- m2 b9 O5 u1 Y8 E target=_blank>赏心悦目</a></td>6 J3 c! u3 _% b3 h7 `
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
4 e! u0 V' l% [8 Q1 O) [ onMouseOut=hidetip()>网页素材</a></td>
! @0 I/ z& O( o! f# d <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() . z. m+ k( H. ~- p8 [& _# x2 t+ v+ X
target=_blank>图像处理</a></td>. m" M& O( ~2 B9 h* H+ j
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 3 ]: ], `7 ]' C s
target=_blank>网页特效</a></td>
- F# Q6 B, F9 K6 }6 }6 F: w/ X </tr>
6 w! q4 k/ W; }7 R3 _ </tbody> $ u, f2 A2 ^9 q) h. h6 ?2 S
</table> |
|
发表于 2008-1-21 20:52
|