|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间. U f4 Q8 a: y( Z) k5 q/ n7 l
<SCRIPT language=javascript >
s; `& z; E% u5 `) H- }document.write(
6 D2 r: G( K3 P3 o! G4 l9 o"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
2 Q0 L, e. g3 q/ d+ O$ {6 y;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
5 d/ Z+ Z6 ?3 O! y9 }% K
. N H L. I- vfunction showtip(text) //显示链接的说明
: A2 H2 A" M1 c) o2 n{8 T) ~8 D/ H4 d5 w- o7 u
if (document.all&&document.readyState=="complete") //针对IE+ z1 y' J, T( [3 ]9 Q& x, |: Q/ U
{
; n) d# A) I3 l( }6 p
5 P X! C! r* Z- c, h document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";. T7 I( c* H4 x% f- k
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;0 k' [7 m( h4 X9 Y
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
' o( ^) ?2 S$ r; d5 m5 p8 L% D document.all.tooltip.style.visibility="visible";
! b! T1 m( m s+ }( X0 d }
! O: E; c6 m' F; ^}
' {3 j1 e: d3 L
* J; Z1 f; o6 G( W( E- C' p {9 Ofunction hidetip()
: l' k) n ~9 O# f0 {: M{
( q1 V ]( Q4 h3 n, @9 p, ^if (document.all)9 J6 a, ]* l& g5 Y: `+ |. X5 Q* y% l& c
document.all.tooltip.style.visibility="hidden";& f! f) F: ~, {+ u- L
}
/ l9 O3 _( R6 q6 @/ @+ o2 S3 X$ W$ |9 H- W4 e' w) ~0 g
function setcolor(fntcolor,bgcolor)
3 S' P/ Y7 v( ^{
( u& p5 O. f! e( V6 n document.all.tooltip.style.bgcolor=bgcolor;
) ]2 N0 a; I$ B0 w9 m: ~* d document.all.tooltip.innerHTML.Color = fntcolor;
* j9 h5 V' R" E) Y) w- @}
/ F- A/ n8 ~, p" w( V8 M2 g
2 ]+ s6 D6 x# o4 F4 v8 k* h& Ofunction showhint(text)
0 d. D' C, W ?6 v/ d3 D6 `{5 p$ R) M8 @- q' Z+ z( P
onmousemove=showtip(text);* n9 O0 `+ }7 n) y' H
onmouseover=showtip(text);. t. J% z* e4 x+ Q' i# O& X4 j# L6 E
onmouseout=hidetip();
e4 l k% n% G6 a, m}
8 Z2 x& U% ^, {# B/ X! y</SCRIPT>$ G* l" f8 t( n& Y% X; _, S
) s5 }3 O' b* o5 g1 p* C3 T
" ~- a- ]4 S' T% z
/ r$ U: s, x2 v- B3 O) V7 {- O
% h9 V, k: S. ?! v2 {- H1 ]
3 M2 ]( g5 X& T" ~. F
3 r; Z) p `! f! b二：将下面的代码复制到〈BODY〉区
1 G% V# I* ^/ o<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 % m% m/ r0 k' g) w# `
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
, \& f7 }! k7 W9 L) K <tbody> , C4 X; h4 x7 ]6 S; N9 c- r
<tr align="center" bgcolor="#ffdfd0">
, @. J# A( y' M4 { <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() % c6 u3 j6 b2 q! H7 w" r6 E/ y
target=_blank>赏心悦目</a></td>
$ }8 a- z2 ^: T( ?& B <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
, z& L( f, Q2 D. T6 t- \2 Y) E onMouseOut=hidetip()>网页素材</a></td>
5 u3 ^8 b; q# d) k- P, r# A <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
0 f& y- {/ s! J% }2 N S target=_blank>图像处理</a></td>. \& w- M8 \) |1 S
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 5 q9 _2 e5 D9 Z) j: Q/ P
target=_blank>网页特效</a></td>
6 k- W9 ?" s/ V& \ </tr>) Y5 ?7 M' C5 q& J, |- F, V
</tbody> ! o: T/ G7 X- v7 F" ?
</table> |
|
发表于 2008-1-21 20:52
|