|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间) S B: R, o) ?9 k' E* F
<SCRIPT language=javascript >
]" o+ S9 R( r; R( wdocument.write(& o3 ~% M2 ^- S) A3 z/ |- o
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
; c4 S, K" p5 o& j) b% X;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
?; E- H* e8 g5 G& z# L& t: m8 y$ C
3 S8 H7 u# F/ v* Zfunction showtip(text) //显示链接的说明
2 e) l+ y) M7 m8 i# N. w% g% f& d{1 a9 ^% X6 W$ J5 o1 Z
if (document.all&&document.readyState=="complete") //针对IE
: c# b( D7 {0 L+ L {. _& y8 O, x( R+ c7 f$ T, t
5 P) C/ D% W- U$ P% J" [% a document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";1 J# D" [. v0 D: f: \
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
4 v9 S9 |& X4 e document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
* z7 S# O( n; J- W5 \ document.all.tooltip.style.visibility="visible";
5 I( T2 z1 V8 g: O: Y }
! i& g1 V! p4 b}" _# B: M1 t9 \
- l5 J. c- U5 Jfunction hidetip()
5 R8 i4 |2 y Z; ]+ u4 e/ b* P{) s/ J1 W, _* W4 N& U
if (document.all)( ]/ y: K# a* Q8 l
document.all.tooltip.style.visibility="hidden";- K6 P) B0 q5 l$ @. E
}
]# L/ B: [# X+ ?4 B& F- C8 Z- @" U7 i5 A* n
function setcolor(fntcolor,bgcolor)
/ v4 i' m' Q0 f" X, ^# ~{
! g$ K& H( f3 ? document.all.tooltip.style.bgcolor=bgcolor;
% E9 ?1 D( q, C& y9 W* J$ D3 I document.all.tooltip.innerHTML.Color = fntcolor;
- f$ @0 L% C% \+ p}
) v) x! q) {: ]7 b
. s [! z! o" @& r) ^" U) z) Mfunction showhint(text)
0 C: X0 h E/ I% M{
9 m0 `/ [4 L# a# u3 k" f; i' A/ o onmousemove=showtip(text);
6 F' _2 [& L( ]4 W i H) s onmouseover=showtip(text);) Z$ H% L, A1 J5 J* X
onmouseout=hidetip();
# K6 M, \4 m4 z: y) l: e}
! a. ?' T, w3 h( L</SCRIPT>
" [ `4 i+ S M& q4 v
& i% ?) t& }, x" L) ?
( q. }2 J0 I( G- M6 `" w1 E) l) l. t, O7 F Z
# E2 g! W. @4 I1 H) l/ {
& L1 l: Z& Z# V5 ]+ W& Y8 u/ t. F( c# l! M! G$ g+ g
二：将下面的代码复制到〈BODY〉区! P t2 U, h6 O) s4 Y" D& n
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 " \: o+ Y$ S! f* ~/ @
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
/ S5 b# ~" v- h: o4 c0 } <tbody> 9 n: C0 g. p9 \
<tr align="center" bgcolor="#ffdfd0">
* ]' B3 v6 t% @' w! T: F; v <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() 9 ?6 X+ O" B% S( j; [
target=_blank>赏心悦目</a></td>
) ~( i. B6 P1 A0 f9 n <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" # S/ d6 z7 c- v# k
onMouseOut=hidetip()>网页素材</a></td>5 x1 J a0 U$ [- A9 ~- D2 T' o7 j
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() ' }2 |& Z0 u9 N6 J6 f
target=_blank>图像处理</a></td> `" B7 k; E7 D( a( j& V
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() / } f" o/ p! e
target=_blank>网页特效</a></td>
0 s: C9 R( m- s+ n$ A3 n2 v </tr># Y- Z7 H0 X$ _8 C/ @& c% }
</tbody>
3 J0 K! P! K; p3 h) R </table> |
|
发表于 2008-1-21 20:52
|