|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间+ x! m# p; J: v( b/ F" N
<SCRIPT language=javascript >
# r! m3 L$ s n2 zdocument.write(1 y3 I o4 T7 d. u2 z" B+ ^* g
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\0 R1 h! v- Y$ y* T5 F' \& R
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");7 y- d/ C# N0 F+ r: P3 C' T
% m" T# u: |1 {- Z; c9 ^3 `; wfunction showtip(text) //显示链接的说明7 R! k2 n6 l- o4 @! e3 ?( g4 v: x5 g
{
2 T7 g& R9 R$ R! o if (document.all&&document.readyState=="complete") //针对IE; S6 j# K2 H" F z ~/ t
{
6 b' h- n6 h. W6 w* e3 R3 t( j 6 V. r% T4 T6 U6 Z( g
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
& \3 ~3 d" u0 Y( G document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;4 o) ?) L# r3 a7 b% {* H* e' w
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
/ _5 O+ k4 B8 c, T- W document.all.tooltip.style.visibility="visible";6 ?5 T8 c Z% H8 m* z' B! F
}6 q. \. b4 M6 y2 N, V0 ^3 _5 j
}
. } L- A; ^$ A7 }( O
" A# G' e7 i6 M( `function hidetip()
# |/ ~6 K5 D( ]; E' _( H{
* j2 l+ m! ^' K/ O0 Wif (document.all)
2 S G2 U5 O8 A( P+ J! B document.all.tooltip.style.visibility="hidden";
/ v$ `" d: ]3 h; f2 N$ E) g}
2 D4 x8 \* _- w. l; U% ~+ {3 ?5 w$ @$ b! j2 g( Z0 ~
function setcolor(fntcolor,bgcolor)
. d: X# M' Q- f! g, i6 s _( S$ D8 E' x{
: p' I4 m, m' x) R7 G% | document.all.tooltip.style.bgcolor=bgcolor;# V9 B$ e; @: n! T8 ^
document.all.tooltip.innerHTML.Color = fntcolor;
" S5 S8 w: W/ z" v: ]* h}
: \) V- Q% K# M: ?# Q+ o: N* ]9 d) G J; p# P
function showhint(text)
" Y0 ~3 F9 }$ Z0 G{
. i& V( w# a% Z onmousemove=showtip(text);1 @5 A" g3 D# ?$ ~1 J
onmouseover=showtip(text);
3 g6 k4 z0 E& Q8 J3 U onmouseout=hidetip();
{2 l; d# G3 I& N0 u& x5 T/ k. H}! V0 L$ n/ r0 W6 R! K& ]. r
</SCRIPT>+ d4 c9 `* l* [5 i: g+ e' t
D: C! Y6 }( S1 e- \6 ^5 H1 y+ h1 Z) e2 O' _2 r
5 s$ @8 F, W9 v! Y) ^- o. n- E7 W2 a h3 }3 p' Q4 V) H( s1 W
% {8 ]! F4 d I" d3 `; I$ o3 }( P$ a( `( F) J% U
二：将下面的代码复制到〈BODY〉区
8 C- w) W. B: o% X$ C1 d7 I7 f/ o<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 7 ^- i& k: S$ x1 @
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
* E% v, A8 A: {5 p* U1 G <tbody> 6 K5 i' S- f: v8 W j( X
<tr align="center" bgcolor="#ffdfd0"> . _" F3 z+ u* y
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
, H. P/ B2 w1 m# ^$ C8 A/ w3 h% K2 k target=_blank>赏心悦目</a></td>
0 `) {! F @. T) M <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
6 {9 T+ H$ n, q" {2 X onMouseOut=hidetip()>网页素材</a></td>: T) O" z2 ] {
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() ) [" Q( K* ^3 K: E/ R4 d
target=_blank>图像处理</a></td>
2 n( B1 ?0 \5 {$ g% k6 ]9 t6 G) z <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
0 c4 \& r' G( L D target=_blank>网页特效</a></td>
+ l4 V; h# a6 G; s# s( J: T6 X </tr>
" ~. E6 j/ O2 _ ^& z </tbody> * J+ b: @+ K, G E+ Z' R9 K0 H! g
</table> |
|
发表于 2008-1-21 20:52
|