|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间( e; k; S( X: o8 `2 u
<SCRIPT language=javascript >3 ] d7 Y+ Q( U4 R8 {9 {
document.write(* C9 ] N9 Q0 p2 |; m' f
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
3 n M3 ]* @% b) Z" e+ i;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");) B0 _$ N/ s$ k
+ q- I. f' B! _3 s' D
function showtip(text) //显示链接的说明1 B; P4 v4 v: U- {
{
]. S. I9 R, U1 h; @1 L if (document.all&&document.readyState=="complete") //针对IE
# o6 d* M$ \0 o1 E( L7 B, U {# t7 J8 j' ~8 a' ]. s5 a
* ]& d9 ~; L, L document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
V/ n0 A" O5 l6 E document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;1 W' P$ f% J. g3 Q
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;. m$ c4 A3 M% M v s. K B9 E( H
document.all.tooltip.style.visibility="visible";
. @( R. x& b7 I0 J" x$ j }
$ }8 d/ G0 ^: n; [' `}- M1 | i- J( h; [, i1 Y
3 i- R1 D. e$ D3 n' i
function hidetip()
3 g7 c$ N; S3 {& k{
. |; U# M: u: O/ Oif (document.all)+ } K" {% V+ |- M9 B
document.all.tooltip.style.visibility="hidden";/ y$ K2 X6 m- R/ w" _
}6 v9 |6 G; k; |& l: F% X. ^
) M* \& j9 J8 M g0 d2 O
function setcolor(fntcolor,bgcolor)
( x& v" m3 t. l5 e) Y{ Y* P( @) v q* }
document.all.tooltip.style.bgcolor=bgcolor;
1 |- {, `% |1 ?, f% R# o document.all.tooltip.innerHTML.Color = fntcolor;& p8 Y2 f5 H n6 ^( g; T6 X- Q
}
. c, k* Y& P5 i) X4 H
. I/ N4 ~; \ i( G' @& Vfunction showhint(text): M3 E9 O5 x) e- {1 ^0 ^/ |. C3 D
{
7 h- m. a( W6 ]% R9 v8 a$ C: i onmousemove=showtip(text);
o9 V. P! o& d0 C& y onmouseover=showtip(text);7 z0 E3 Y2 R5 r) J7 c3 W7 L5 [
onmouseout=hidetip();
7 V; H$ k. }, \! A" X}9 }2 Q0 x) n6 u7 c5 A0 X& ]
</SCRIPT>5 d' @; k* E, p& D, ^5 E5 R
% {( H0 G: e* `$ s! [$ D* E4 y6 c. n. C; M4 ^9 M6 e
. l( Z- m! {: e5 D, s) p
6 ~5 @/ G( d( Z" w- s3 u$ {8 I, v( h" a+ F% y' v! N* U# M; }
4 Q. i. b- z& ?# X! w. [- o+ c
二：将下面的代码复制到〈BODY〉区
* I) L- v; s3 {6 _" i% _4 g<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 8 b( Y/ N" g4 N
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">. ?1 q8 D6 v. x" z
<tbody> + Q2 A8 k6 i: Q, Q. v9 n6 d
<tr align="center" bgcolor="#ffdfd0">
0 y7 T) P. a8 R% }0 z8 F <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() 6 R( e' K$ a3 A; i& X8 U& F0 m
target=_blank>赏心悦目</a></td> {. |' L6 x! z' S
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
! y( c; s- i' p* [( k onMouseOut=hidetip()>网页素材</a></td>; l$ N! o$ @, n# ?
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() . Z- a5 y5 u" d f; p" o# V
target=_blank>图像处理</a></td>
1 X+ i2 D7 m% I1 M, M1 Q <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
( u/ j# _5 c8 s5 S target=_blank>网页特效</a></td>! m! T" d& G) H# R3 ^( y
</tr>, S2 c9 u2 q$ c! V( e3 W4 o1 Q
</tbody>
v# m& x7 A( E' C </table> |
|
发表于 2008-1-21 20:52
|