|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
( x/ Q( @( i( X; e<SCRIPT language=javascript >
) L& H* O9 ~6 q. C) @document.write(
8 K. x Q0 [ V& y"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\3 O* q% l* d" I4 ]$ ~# o+ O! D. a$ D
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");9 R. ~1 s$ `; N# e0 C4 V
9 g/ p: A9 ? N$ X, `function showtip(text) //显示链接的说明7 H4 j9 v2 c4 O$ t7 W/ c1 s* P; @0 i
{! a- L5 s& }+ h" Z
if (document.all&&document.readyState=="complete") //针对IE
3 v0 z) X M) E& j5 _9 n {
2 \, h; c: K) l% L: J) t* e 2 `3 c7 N8 N) i' g. \5 ?
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
1 U0 h3 l9 c; M document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;" D H) o$ f: `4 ^: ]- ~$ q
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;. E( \; u2 z' G) I/ ]
document.all.tooltip.style.visibility="visible";9 y4 U- y6 k2 X
}
/ ]' z1 L3 D7 d9 f7 ~3 U( r}
2 j6 u. R4 G4 w% n, p( c2 \, J) F6 V6 c H
function hidetip()
2 |. ~5 P* r2 |# E5 x+ y{1 t: }4 k5 b$ G( G, m
if (document.all)
5 h' a! y" O, P3 \5 K9 I document.all.tooltip.style.visibility="hidden";8 P3 l+ d; d1 w2 m0 P9 G) Z3 S8 N, w' j
}0 u6 J3 I# s5 C' ?/ i/ b
( Q2 S+ f, b0 \+ |1 [7 [
function setcolor(fntcolor,bgcolor)
8 x" q3 l& H) x h* i{* @7 N- Z# E: M# o4 C
document.all.tooltip.style.bgcolor=bgcolor;/ |/ @. ^. C3 e5 F+ W7 o8 u, f5 ^
document.all.tooltip.innerHTML.Color = fntcolor;
5 W7 M$ D$ {% e5 V; l* b8 v}5 n3 z# y2 ?# \$ ^ U7 j3 S# a
2 H3 q3 D y) k* Q8 H; P
function showhint(text)9 S2 v6 y5 F: y. M: Z, E* Z
{9 J3 }6 ^- u j
onmousemove=showtip(text);- {) @$ [5 K- X( P- {% U" @
onmouseover=showtip(text);
( J S7 ~( a. H. c onmouseout=hidetip();
' Z4 }8 }! B* r' j0 c9 B3 w}: p1 ^2 P! ]) t" W
</SCRIPT>
; Z( r0 B1 q! `" F9 a: u
2 I. t0 E! ~; N2 i3 D! d, B1 a6 v4 `- ^# n$ e
( \2 _$ i! _+ k2 i, ^8 ~. r
; Z: N) L. \4 O2 g' X9 Y. }- ?6 G; r1 W; `8 r
8 d: J# u0 H, {5 Z; c5 i
二：将下面的代码复制到〈BODY〉区
2 n8 Q; f. d% S9 O<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
: `' { j5 t: A$ O3 [* s% Ccellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
x+ D/ g0 T( ^5 G <tbody>
" f+ @1 w- K$ a; b' S: W7 T <tr align="center" bgcolor="#ffdfd0">
6 {3 `6 h* n4 ?9 R; J% r6 i <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
" g Q6 p5 C- j# h8 f# L! b1 C/ E target=_blank>赏心悦目</a></td>
! K E' T. d- M u; w; J <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" $ J( P9 s; ~4 Z- b
onMouseOut=hidetip()>网页素材</a></td>
5 k$ O7 s: U7 Z4 S0 p6 m5 | <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() - K5 Q7 |" r. J) }# e
target=_blank>图像处理</a></td>
. ~2 d _& R2 x$ j <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 3 ~2 w; C2 a9 h3 e
target=_blank>网页特效</a></td>
. M( ^( c" V, B' M7 N7 k6 |$ R/ o </tr>
3 u6 j( P2 U$ c </tbody>
4 v% u0 U# ]! @1 l </table> |
|
发表于 2008-1-21 20:52
|