|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间9 S* F, P) m+ W
<SCRIPT language=javascript >* o# {; m3 X, ]
document.write(
. X* Y N1 O3 W, v"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\ L3 p- [) h2 l* G! T r' `
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
: |- k& {& J# F* ^8 y- t, k8 }0 ~ Y0 l
function showtip(text) //显示链接的说明4 g( x5 c) W3 i& ]
{
9 b# l# k W6 {$ [* w& s L. I$ l if (document.all&&document.readyState=="complete") //针对IE
J! @; U, s4 U% l+ B& i) } {% y; S" @6 g8 Q$ G
6 x$ m/ a& _9 [8 k a \
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";; }0 S, j$ [3 }" h# b6 {
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;$ ] s6 c0 t0 A; k
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;& T$ {) ^1 r6 s; F
document.all.tooltip.style.visibility="visible";
4 `, o( g u: L( g% I }1 l* C b) Q) O3 E" C, N
}! D* l+ {5 U' Z6 s
; B, X8 n2 u! J6 z- j: G& b
function hidetip()
2 u7 u3 O9 b" S _/ P3 Q) l{3 E s' C B; }7 A( y$ e$ l) {
if (document.all)6 X/ N, k$ a& i4 t) q/ S9 O
document.all.tooltip.style.visibility="hidden";0 ?8 j3 G( h( E* I6 ]1 B% d4 R
}6 d7 @4 F( c% z* I2 f' p6 l/ r
! s' Q) J2 W0 i8 l+ f! S: Rfunction setcolor(fntcolor,bgcolor)8 K4 T! [( a/ G: p
{
$ k3 d, V0 J, k document.all.tooltip.style.bgcolor=bgcolor;' R4 \$ X8 q5 I# v3 X1 b/ G. j% t
document.all.tooltip.innerHTML.Color = fntcolor;
% Y* A) }" b# t5 l0 B' ]" g}; J- \$ O$ z: X2 S6 X4 `6 {. ~- l
) q5 u8 L% x0 Z' n$ d& e7 ufunction showhint(text)
# [. v& d( @1 [/ i; ]{
; b2 O, N0 \8 J, T+ D onmousemove=showtip(text);3 j% M) f/ U+ {: x$ V$ F4 w1 S. T; J# m
onmouseover=showtip(text);
. `- ?, o" {$ a3 c J* e X, T onmouseout=hidetip();
3 [8 V c# u \& h, u}- V2 J- c0 c$ V
</SCRIPT>
1 \2 {5 a: e; s5 S+ N" X( Z6 e: N* p9 r% r! _, c' w
; ]3 W0 H- Y* ~
S9 g+ O: S5 J* p& A; c/ x+ M! w9 C0 ?' l5 N
' ?" i, d2 z0 B7 W0 v; f
, W$ C. h7 T9 |1 {" x9 F
二：将下面的代码复制到〈BODY〉区, i' }8 S! D. e
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 " C; x: S" ~7 p
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">. C. F) F C. M8 c3 d3 V7 A9 W
<tbody>
) ^4 N6 |& C2 B+ B( B0 V$ v6 N <tr align="center" bgcolor="#ffdfd0">
, V: f$ R5 ]1 j# S7 M- H5 b4 m: v <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
$ `* E* }: ]* n! A* t9 }' m8 |7 y target=_blank>赏心悦目</a></td>* ^0 m7 m# V# [0 _" [: |9 G- k# H
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
9 A4 L/ c4 i4 M/ Q" v' A) h* z onMouseOut=hidetip()>网页素材</a></td>% y! e$ s( [+ L" x2 ?/ V2 |
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
: _7 K" f: u/ E- D" h& f% { target=_blank>图像处理</a></td>. D- e7 g- Q8 @6 ^& J; _- X
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 2 r5 H1 g( M# e, d W
target=_blank>网页特效</a></td>9 x9 h2 u0 F+ ^; `2 G4 q/ S$ i
</tr>
0 R6 c. ]! n; d% R0 P" v( i </tbody> % T- e0 [/ _1 H3 @2 |$ v) q# v
</table> |
|
发表于 2008-1-21 20:52
|