|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
# P/ D$ @# }& h<SCRIPT language=javascript >; B0 `2 ^) w$ B8 W" x ?+ a
document.write() s; d' ]' Q0 b! J2 O3 b2 ?
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
# s$ M$ |; ?; J0 U3 U7 l" a;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");/ s: E2 f" B) l( N
2 X, y9 J( F) Lfunction showtip(text) //显示链接的说明
, S) H) } _) c) o' s/ K% b1 z{9 y# p A) i5 `' m) M# d- g: b
if (document.all&&document.readyState=="complete") //针对IE
x7 Z/ b! e1 m. u1 R, F. C {
, `# G/ y* k4 t5 z* L' l
$ b9 f* G6 e |) M1 I7 B* y document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
4 h4 Y# v9 @/ r) E1 `/ { document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;( [( F! C# e2 p
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;. R! }1 q3 f9 J
document.all.tooltip.style.visibility="visible";9 B" Y9 R, p, G
}
" f( }9 {! Z) {/ o* I5 T$ ? X5 Z+ q* X}( }. F5 J7 W7 A3 Y" h
( {9 p; \; ]" i& i7 j
function hidetip()
) ]$ ]( ~4 g3 P* ~ |5 c4 s{- K) U4 ~; Z) b2 _
if (document.all)
. V, F' N. m, [5 {- h, G document.all.tooltip.style.visibility="hidden";
4 L& T* p7 C% L}
, ?' }" [5 h) P; I4 ?4 f, P) Y0 U" Z6 s% q- [4 w' Z& ]: q. v( ?# R
function setcolor(fntcolor,bgcolor)2 _2 c7 ~2 s9 J
{6 s7 n! G1 ~4 ~) F8 z, U7 A& _
document.all.tooltip.style.bgcolor=bgcolor;/ e) r& u3 N f0 F* f
document.all.tooltip.innerHTML.Color = fntcolor;; N& n6 K% f) _5 }/ y& Q/ U
}/ ^8 A( ~3 M; E1 a7 l
8 ?0 d9 R+ L# a- w/ J9 {% X
function showhint(text)9 r0 [2 V$ n" A6 X5 @, X4 s
{7 Q' H/ b5 U- T1 [" g2 e5 p6 R! [
onmousemove=showtip(text);
' j) k5 b6 c* a; L/ p, q onmouseover=showtip(text);+ t5 a+ y( D+ v W* P
onmouseout=hidetip();
( e& Y* y c L% l5 _/ `}
b' @; x" L" t- `</SCRIPT>
* ]1 M+ {# p( o5 g) |" e+ r! J$ ~" c; s( P9 i8 H( r9 ^
3 I( E) t4 H8 Q+ x$ D
# t5 w0 h! J, i; r' E3 E/ T/ Q1 [6 z0 Y8 A; i. N# O0 l: I
8 x- L4 T$ M* [$ X* O
- X3 O4 r9 H% i$ O3 ]/ M/ H' Y* S: K
二：将下面的代码复制到〈BODY〉区
% ]& _' b$ M) d$ J* p* y<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
9 b0 A, x( Y2 P8 E+ R" tcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
9 s, d% ^: {6 ?' m' i <tbody> 8 h; C2 K& F0 K# @! m
<tr align="center" bgcolor="#ffdfd0">
0 l1 h7 W: L" V% [& h# ? I" U5 m <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() : V8 ?( [: [; G8 {5 a
target=_blank>赏心悦目</a></td>0 Q; X3 G! l: R+ m# E7 p
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" / i. a4 \- V% l, S3 i: K2 a- `
onMouseOut=hidetip()>网页素材</a></td>$ Q6 e# [/ X9 L4 U. l) z+ G! P
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() . n; v3 H3 n9 Z0 n6 g6 X# `* ~
target=_blank>图像处理</a></td>9 a7 G, _. s' \) Z- n# v( C2 ]
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 7 e9 @1 e; e O' Y4 d$ y) b
target=_blank>网页特效</a></td>
; L: H! H# `- w D5 L" ^- i </tr>- n3 ~7 t8 V) B( D; ]& [* e
</tbody> ( T8 i, r) _- R; u
</table> |
|
发表于 2008-1-21 20:52
|