|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
3 I6 p! X: i0 D5 H& Z# z2 k _<SCRIPT language=javascript >
/ B, K! t+ r6 O( l& s1 ndocument.write(( y% { _6 W o$ M1 [2 c( p
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
( t7 u! u4 _( K" h8 g;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
# B- k! @( C( k+ K& S: d, t" y: f0 U, X7 i0 l3 n- q r) B8 T
function showtip(text) //显示链接的说明
2 L5 _0 L& J. ^* g{
/ Q1 P% ~* c+ B6 J% k if (document.all&&document.readyState=="complete") //针对IE
8 s7 a) u0 A$ ~6 D {$ Q2 Y) f* y; O& u
- R3 ^" q0 O5 g$ Y, h9 q document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";! v9 u6 f N% p& Q9 z. e
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
. A' L8 U: c' ~, g6 L2 ]' { document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
4 I/ C+ z. j1 q' ]5 T% } document.all.tooltip.style.visibility="visible";
5 n1 a% _8 p O+ K' i }! t* o0 ~8 i( b% B
}
! g& d& K) k- r0 C/ t
5 d6 J; f. }- A7 afunction hidetip() 1 Q& c- F$ n( {# t0 t
{
3 I$ `7 h0 m0 yif (document.all)/ b/ p6 {; @" K; g& U
document.all.tooltip.style.visibility="hidden";. e& a! X9 @0 G! ?. U$ b
}
/ F7 N$ E7 ^1 l4 M# ^* r- s% t% K4 \! W# F# \/ k1 s* Q
function setcolor(fntcolor,bgcolor)3 f" S; p- ]. @( b9 O9 [2 X
{
; E0 E) o6 {, J document.all.tooltip.style.bgcolor=bgcolor;
: V4 t x5 g& R+ M- d* ]( U3 | document.all.tooltip.innerHTML.Color = fntcolor;
3 j# h& x$ Z% U, o$ ?5 C9 G}
: y; X+ T; d O' J+ ^4 t) N$ j( B! B4 r
function showhint(text)
/ H. d1 y# H) j{
5 F' ?- c- X5 ]) f3 {' ` onmousemove=showtip(text);; f' C+ e7 t* R
onmouseover=showtip(text);7 _. S3 J+ a$ u
onmouseout=hidetip();" x; @& |9 v# \8 } o
}% Y& u) @( p3 ?% T/ r E
</SCRIPT>
' K1 `* ^$ ?' d6 P
3 M8 g$ g9 V" C" R- V) h" n
e4 v6 V# F# N* ]: V; E; T& q$ k1 D6 A L5 ^- `$ X" ]* g9 _9 S
# B8 A2 g5 y9 A$ h3 ]
+ B( D' `* u$ c1 g6 ]/ r$ O! {0 B# t; }
二：将下面的代码复制到〈BODY〉区
9 F* N# I# P1 G$ c1 b- d<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
! q- m* X( W: m8 B! \; Rcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
8 s: s2 M: Q9 r# N7 G8 n- y/ j% c <tbody> / s! X0 U' _; e( J, L8 O6 w z+ V
<tr align="center" bgcolor="#ffdfd0">
+ q1 f: s0 ]" A3 M# ~ <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() 9 r: t, I' e. ` a7 X
target=_blank>赏心悦目</a></td>: R( g: v4 M! f' v7 d" t
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
) ]" T. j5 G4 m! S H$ _7 V onMouseOut=hidetip()>网页素材</a></td>
0 K9 [7 t( M. u9 f* I3 j <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
; [) ~8 q& \1 } target=_blank>图像处理</a></td>) V' Y0 n6 S! L# |0 B! \1 ` S) p
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() g( i% m) a' e7 g, F# j4 S: U
target=_blank>网页特效</a></td>- D) C$ H! k" J. M ~
</tr>" t3 h) A; X/ e
</tbody> ( M! }& s# c) w4 k+ G& h" l# k* p) I
</table> |
|
发表于 2008-1-21 20:52
|