|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间- @# r1 D3 B2 _9 R/ ?
<SCRIPT language=javascript >) B+ r# u( e; [" e0 Q; C
document.write(
1 I6 J. V# I! _3 c"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
7 p6 G" Q. V% x: A7 S' S;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");- m$ k' Y* o5 C) p2 Y' m
$ Y* ~1 R# `' ^- u5 B: P9 f( F" ffunction showtip(text) //显示链接的说明
$ D* }0 w% E7 p{
3 N; y8 D; d5 y ~7 ]$ ~2 U8 J if (document.all&&document.readyState=="complete") //针对IE9 r& X* {; y9 Q) I( Y
{2 `2 K6 _( w. ?, O: }2 u E
2 x5 Q, g2 w/ M* B- P) G. k' S
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
/ f8 G' z/ e5 p0 w7 ?. \% E4 x+ O' \ document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
8 Z& @+ ~2 Q0 W document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;9 @. N+ V: N, z7 I; u0 l
document.all.tooltip.style.visibility="visible";
4 C4 o! y' y0 ^& Q; @' I$ U }
0 a! I+ Q& J/ y& T. ~* q& D3 [9 ^! Q}
$ }8 B ^9 v2 M# ~% b$ B
' W! p; O i' }2 _( b9 _4 r7 t, g- `8 Q" ]function hidetip()
+ t5 v$ V1 n! r6 ]2 y{ @# H' v% y& ~
if (document.all): M- w; E$ @4 \
document.all.tooltip.style.visibility="hidden";
8 [9 |( C& Q, H8 _, G; s}" K6 c1 L6 u2 ]4 ^& F& U+ ^
3 i" T T4 i6 W! v# ?- @$ U
function setcolor(fntcolor,bgcolor)
1 N/ g, q `+ I{
' E: i$ D/ T$ z( o" ^ document.all.tooltip.style.bgcolor=bgcolor;
3 N/ w4 M/ G: l document.all.tooltip.innerHTML.Color = fntcolor;
$ O! W& U* \9 O7 W; V}
3 R# J+ [. x2 ?1 l+ ?) J7 M. U6 z6 Y, `, N8 e# n
function showhint(text)
9 N u$ K. ~! H, N{
, ~ E S4 A4 a% ?% y4 x( B5 |/ V# k onmousemove=showtip(text);, x( z& ]7 r5 b. s3 J$ O
onmouseover=showtip(text);
! F. d" M$ n2 Y* |5 V C onmouseout=hidetip();' y2 }1 _3 }7 D3 o1 v' A2 `
}2 c- m7 f8 P: V0 h# F2 d
</SCRIPT>) D6 m! U7 D# J, R
O7 b. T! h! B; B: R+ r
* J, ?, a" _& {, o
k9 f" s5 u$ \; P- I' ~$ G' ]
% x0 w' r/ P& ~7 t
8 _/ c. o k2 r% y+ D2 Z1 v: P
/ n% }" \$ X% t; P6 p; r二：将下面的代码复制到〈BODY〉区
+ X+ b( L; `5 n7 j! Y d* P! A<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 : w. l9 u7 t3 r+ s6 g* e$ q
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">; E% l& `& b% X5 i1 \: K1 L: W) D
<tbody> 7 z* g9 d3 Q" X3 u8 D2 K. Z
<tr align="center" bgcolor="#ffdfd0">
2 u% U1 I# [! z! x5 W <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
, y1 c/ f7 M# q/ f( B- z. Y& O target=_blank>赏心悦目</a></td>
+ F, u; t$ M1 v; G( A% D; H$ H <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" 1 R5 W% v. v& I7 ~: ?* A% P
onMouseOut=hidetip()>网页素材</a></td>- U. m2 `2 t) Z# n- f. C% ]
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
h; n+ I# t) P! W# R5 H4 o0 _ target=_blank>图像处理</a></td>
+ \ g `1 ~1 [" C <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() K' w1 s) L7 v9 ~9 F' J3 Y
target=_blank>网页特效</a></td>* n i |. n: O- c2 C; a# N
</tr>
9 u- G4 ?# H3 q- | </tbody>
) B* a1 w! u. @/ g) T! R! @- P) A6 ] </table> |
|
发表于 2008-1-21 20:52
|