|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间/ M) t) H3 p, @ O
<SCRIPT language=javascript >
, ?6 H$ Q6 w# u4 j# e; tdocument.write($ x' w; g0 ~/ T/ V! P! }3 D
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\6 \ Z$ j! z1 z4 \
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");, e( o6 W& A% x; K7 ^5 u W' ~! A
) s2 m$ b) M# A/ \5 Efunction showtip(text) //显示链接的说明
( z0 J. y0 M+ N4 z{3 T7 k G: f" F7 }0 ]( O8 ~
if (document.all&&document.readyState=="complete") //针对IE9 r8 l* ?: s' [" w& P& H/ g! j1 c
{5 R3 I" l5 Z0 h) I
4 T, o$ j) p" Q* H, u+ I7 ?. E8 Z E5 ^% _
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
Y/ X! l9 y% T, u5 t8 [ document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
) v4 \$ w1 K1 G- j5 O, s document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;% h. _- P) {7 p; D! I/ U3 t, s, _/ G
document.all.tooltip.style.visibility="visible";! F( j! v1 P! |! Z1 d) b
}
/ z- i" Z+ p6 }- n' Q& d- q}, F4 n- d# ]1 X% ` \
% b8 s' }9 M% R/ ^' b
function hidetip() ' r# {: x' A& D' V2 q1 w/ X3 C; s
{ v0 M0 Z% N, S3 T
if (document.all)
" k! g# G) l* m& w- h document.all.tooltip.style.visibility="hidden";
. y) B; G- u3 f' X8 ^& \}
2 x( e# Z7 I# T" G7 T" K5 x# F* s7 N8 {! p9 r/ @+ x
function setcolor(fntcolor,bgcolor)
$ A7 c+ R* i+ U7 Y; l+ X{
i4 g$ s) w0 T6 B: x# T' ^ document.all.tooltip.style.bgcolor=bgcolor;
6 @4 p7 N$ ]: t) p) f4 Z document.all.tooltip.innerHTML.Color = fntcolor;
# W3 b4 ?3 |% I. k8 z}( S, X! a7 K$ }2 G# t
' o A# `# J3 o$ Q* H) }4 @
function showhint(text)" @0 I7 I: c$ `
{. C' |9 [5 `* c( R( ~ s( F8 O- {
onmousemove=showtip(text);
0 q" F, ], H% d) G* s" s7 L onmouseover=showtip(text);
+ z- k; T* X* e7 N onmouseout=hidetip();
{! Y: Q9 V: n/ X4 i2 i}
- ?' d D$ |7 ?( N+ Y0 E/ s Y6 H</SCRIPT>
7 S! P# P) }9 W: }; h: d- K
p) v4 B) F2 p8 Q% W+ _% Z8 ^
6 e9 y$ p' ]/ h1 O H D# `6 [: K& p6 {/ p) T' R: @7 {& h" @
3 d: [* D1 U# y7 [/ M/ y3 X4 _& N9 p7 X1 ^8 [
* X: u6 ~: G% [" w, ]
二：将下面的代码复制到〈BODY〉区
8 M3 O. W8 }) _<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 3 R, }) ]: l8 O- e" N
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
% h+ E" C" E5 c8 j, X" y; C- z: @ <tbody>
( a* `: J% p! L2 g/ ~# v <tr align="center" bgcolor="#ffdfd0"> & l( X( d" r' @# G( z
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() 6 L4 w. V! P7 a* z. `
target=_blank>赏心悦目</a></td>; m* _6 z& `" M1 h" \" q& G
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
5 \% R) o0 F; Z0 X' o1 L& E: X onMouseOut=hidetip()>网页素材</a></td>, N$ d& |4 ^2 O2 Q; i4 c+ W: k1 I
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() 8 n: N- K) B& c; u8 s) `
target=_blank>图像处理</a></td>2 M. ]1 T7 H9 o% [2 z: T/ a
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
5 G6 M* ]" H! h7 F% j9 T target=_blank>网页特效</a></td>5 M: _0 b1 k2 Z5 j3 c* s7 l ?
</tr>
2 J; \* Y8 |( J9 [ </tbody>
/ `3 K9 \' R% [ </table> |
|
发表于 2008-1-21 20:52
|