|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间. [6 A; P2 u4 G0 b6 v% d
<SCRIPT language=javascript >% e' @4 g. X- F
document.write(
- a. G: C3 |! F$ ~"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
4 Y" ^( q. r$ l$ l;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");% l o/ H' t( T; H
0 Q2 H! `& X% \, S$ @function showtip(text) //显示链接的说明 N" \- {3 i, w& C) b
{
; l4 C% e0 u) g- U5 ^5 y if (document.all&&document.readyState=="complete") //针对IE
# i7 k: ^3 H: S% b5 u8 Q4 t! m {
2 x" T b% ~/ Z; J; F' R' |. m5 l0 n % m5 O# m& a# _: d* o% r
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
6 x* g' d( I7 z8 p) Y R0 H document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
+ m$ @3 R* f. h, s document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;7 s8 z8 D8 F. w; a I
document.all.tooltip.style.visibility="visible";
3 m& J1 c a. b W! ~' D5 s }! o, L# |" z& R$ W' H1 t; n5 I
}
) Y4 E' D0 @ ]: U1 t- F- l: F1 v6 a2 w3 l) R* e
function hidetip() 5 [* _2 g9 @3 t& _/ E& N
{
! }% B* m% z) m" a e: L0 eif (document.all)
; S$ l( C7 K- [8 q4 i$ g7 U$ w document.all.tooltip.style.visibility="hidden";
2 N8 Y, b% m3 M# s}
2 o2 L; q0 w. F) I
* k( S- ~$ W# \" \9 S, C: _+ Kfunction setcolor(fntcolor,bgcolor)) [5 ]# j2 F P/ w4 z
{( U3 U' p* b& M
document.all.tooltip.style.bgcolor=bgcolor;
3 J$ T q+ @: c* U6 j, C document.all.tooltip.innerHTML.Color = fntcolor;# Q' I- i9 n/ |! t) I3 O1 L% l1 a
}+ Y5 g( m- x" m8 O6 t) ?
P5 w' R! b9 w* V0 f Sfunction showhint(text); F: E) g9 g3 }9 C$ s9 w, p" ~
{
* o4 y+ [" r) F5 E' d% @8 e7 X onmousemove=showtip(text);- E5 Q: `5 E# X+ H$ S' I
onmouseover=showtip(text);& p; W; G& O1 @) H$ v% x( j
onmouseout=hidetip();
% q/ I8 i/ {/ d' \- F}
# a8 f0 H5 U$ n7 d2 ]</SCRIPT> S) ^* q7 g$ @7 R& x- k/ Y7 k
( u7 u5 ?5 M/ d v1 }# i# ^. X: s
7 u3 G/ R5 l: y9 `, p
) S8 I! r1 n. u* r( u2 q4 }1 H% r" f
4 w% x. Q- A+ w
3 K6 S- h! c7 I2 X7 f x二：将下面的代码复制到〈BODY〉区4 K8 {! i0 n4 T$ O5 V% l% R# u
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 , H% U& j2 P* _
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
5 q& f- i- U% L7 c9 H, g <tbody> * p0 \# I+ Y( }! ^' b; g
<tr align="center" bgcolor="#ffdfd0">
2 c$ A; v6 t3 G, v: W8 b: N& U; { <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
! w, _2 N+ N9 a# A: C/ J target=_blank>赏心悦目</a></td>9 z0 [! {- { ?- U
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" + Q( Y5 x$ H. l' ?1 Q) I! a) D$ k$ P
onMouseOut=hidetip()>网页素材</a></td>
" Y. l6 g# Y9 j- N: q. f8 n6 v <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
, i" m5 n" j! D: f' o8 `- ^ target=_blank>图像处理</a></td>* L, F- u7 ~5 Z% F, W
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
+ Q( b+ N0 F& h target=_blank>网页特效</a></td> T# Z8 x5 N% {, ]( |9 i, Z
</tr>
. P; B0 r! W5 P! ?5 U v </tbody> 3 L+ v# o0 e) }8 C. g/ }
</table> |
|
发表于 2008-1-21 20:52
|