|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间' }! [9 k7 @; l% [' Q1 s3 X) x" d
<SCRIPT language=javascript >& x8 W. |1 N/ I- H: K( r/ F5 v( o
document.write(
7 R5 D. b8 e% F) ^ a) K" H"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
9 _2 |" U' S5 y;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
) L' R% s$ N+ {$ p1 B+ D, v
. Y A# e2 d6 Y" Z" X z$ s jfunction showtip(text) //显示链接的说明/ J0 f9 A( Q, ~
{
* Q2 E+ d/ i" |3 r' H if (document.all&&document.readyState=="complete") //针对IE, [& b" e# A4 c9 U8 r
{
, e) o7 ?# ]6 F' z [
3 w/ ~. a1 f, r2 b document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
) Y2 a) m. t# r5 r l document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;0 Z- _# j5 ~) t6 i% V
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;" @, g% w+ B1 t: |! l
document.all.tooltip.style.visibility="visible";
) J3 X, D( h9 e g }
4 y2 H) F& R, G4 r}
0 p" e# d+ N% V# l' e6 K, T- J& s5 w9 z4 N
function hidetip() 7 e9 w4 L- U9 @2 w
{
# A. N* N$ l% Pif (document.all)+ u( F7 z+ _- K9 `0 l# S, }2 h9 D1 Q
document.all.tooltip.style.visibility="hidden";" W H, \/ S$ g4 x7 a- _' ~9 l0 ^
}
" {# I6 S f2 @" B+ M2 Q: L# q( |- Y/ K& ~7 b* u2 e1 O& [
function setcolor(fntcolor,bgcolor)
6 D, Z3 v) \ b% s{: |3 u; |( `4 }! H W
document.all.tooltip.style.bgcolor=bgcolor;! R6 N+ E0 L2 J6 \( } C+ M
document.all.tooltip.innerHTML.Color = fntcolor;5 e; f R/ C0 W2 K
}& }! S0 \( v! |% {9 [1 c
4 P5 s1 @+ `5 b1 H/ }$ P8 c
function showhint(text)4 c( s! e& g d
{% A/ ~7 o2 D9 L
onmousemove=showtip(text);/ E/ K9 B, @4 D) v6 G6 @# b& F
onmouseover=showtip(text);
. v: ?2 E* v# M onmouseout=hidetip();
$ [# I9 [$ M, {! }) `# q6 a}$ P# @+ R7 O, M0 Q' Z6 Y+ B7 O' N
</SCRIPT>1 {* g3 B8 _, u0 b& p
: v; U/ c n$ W, p9 o' C6 H2 }2 L; ~3 ?7 U6 ^( _
/ y, Z+ B) G7 g# p
( T+ E$ J5 T7 w2 l2 i5 I) R
' M3 E- W1 M- y. }5 F `+ ~1 E }. L8 z
二：将下面的代码复制到〈BODY〉区, J5 ~$ _5 h) D. E
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
8 _% [- _" v# A# ]cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">8 [$ u7 V+ z" {$ K1 Y- @1 z2 l/ Z
<tbody>
. Z1 u( A5 X: g2 i2 X2 I- g <tr align="center" bgcolor="#ffdfd0"> * M6 j& N1 }0 |% Y: O& _
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() : ^ }/ r! W3 N- K" o6 X- w* ?0 r
target=_blank>赏心悦目</a></td>
1 Z% A7 V( a, m/ @0 q <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
4 Y6 w! O# r1 T! z onMouseOut=hidetip()>网页素材</a></td>
) Z/ C- N4 h4 z1 F <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() ( G& P2 T8 j* o7 C- I- D; V7 _
target=_blank>图像处理</a></td>
4 q+ v8 r4 }; t8 N/ J5 o1 Q' q <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 4 B1 H) B/ s- Z7 T' v
target=_blank>网页特效</a></td>
6 c; g' `8 e) T4 ` x </tr>
! I8 C" n) g ]; e9 V1 Y" N </tbody> $ M `% x- ^3 ?; c) i% `$ c% X
</table> |
|
发表于 2008-1-21 20:52
|