|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间( r. l! Z$ _& ]( U% [ T+ ?: o
<SCRIPT language=javascript >5 @! q* [7 @& H6 J8 G
document.write(! K" P2 @$ F( m/ b
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
5 y& F& z0 R1 g/ w4 T: Y( u5 _;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
5 j3 ^5 D2 o" S; G- ~0 K, `" i5 y4 B. y; q' b( j
function showtip(text) //显示链接的说明! v I3 J C5 V
{
4 N/ C4 w, A! Z; ]) [) O if (document.all&&document.readyState=="complete") //针对IE, U/ t% x/ A: @2 }
{- n& I8 M. u) z! @* N5 u
4 W0 ^3 n. Z: d/ `" k& \5 S document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";! U* S! u+ r9 Z" E
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;9 P3 f2 `4 l# R: f3 l- ?- j4 l
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;$ \" W+ @( K4 `$ E' g5 Y
document.all.tooltip.style.visibility="visible";
. S# Q2 S( U! X0 ~4 l2 ~/ g8 _ }
+ G5 [) D3 T {3 o}/ @% F# P! ?% m4 Q
8 O8 |& Z$ K8 _* ^9 g! S; g, @* k
function hidetip()
- S6 u! M/ e3 L' x1 o{7 s5 l4 l) ~" N& r& m
if (document.all)- g: q8 G! ^+ @9 C3 d- x
document.all.tooltip.style.visibility="hidden";' w- h5 t) k+ m
}# M8 O5 E6 Z1 }% Q' U& P
3 F y1 V& T9 q9 I4 Wfunction setcolor(fntcolor,bgcolor)# c: q+ ~8 I* ^2 J1 u$ `
{) Q/ K4 G! b# b+ y, O w0 ^
document.all.tooltip.style.bgcolor=bgcolor;/ ~& N2 `3 Z# l
document.all.tooltip.innerHTML.Color = fntcolor;
. q- H9 e5 z6 M+ A# O}$ S9 ]' c7 B" R) w$ J3 T4 z7 @
8 y, y) g$ `/ G) ?! f' ]function showhint(text)
) ~0 u$ `. c X6 Z{
8 Z# B# c; M1 W; e* [! m- C onmousemove=showtip(text);1 V" M; f$ t) L. l0 N
onmouseover=showtip(text);
: C9 v- r: J( [' t$ @0 N onmouseout=hidetip();0 A4 Q d9 B8 I5 [
}
, b. { a K/ a0 y0 y</SCRIPT>
5 u- P+ X0 O2 F7 e- B6 }; q
# F/ k" l2 i' j; g5 w9 o+ q* q' O, p1 e% R% H. C8 l8 |- w
* R! a8 y0 o c0 D- M
3 i& C! x1 F! p$ l* p6 Y! `2 Y$ e
f) L- k7 t4 m6 r& T) s% j6 S4 J1 }- a3 S8 ~! T
二：将下面的代码复制到〈BODY〉区
: @0 k$ A9 B* {8 V4 S( ] j<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
" [( J. f1 {" j0 {cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
# U' e2 ~6 y8 S$ W* c3 W <tbody> 5 H, H) Z$ G( B! Y6 b" K2 P/ j$ D
<tr align="center" bgcolor="#ffdfd0"> , c! n1 Q$ a7 d- \& J! G
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() $ i8 @! z" e" J3 R
target=_blank>赏心悦目</a></td>
3 p1 Z) J" A1 B9 c2 O <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" 3 G* S. m' d9 l& N
onMouseOut=hidetip()>网页素材</a></td>. y* {% P2 N& q% s5 @ B: }
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() 0 b- t b6 Z3 v* w v! g2 t
target=_blank>图像处理</a></td>6 ~5 }! s* @! J3 O9 v# A
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 9 m+ u. Q- n @* z T2 O" o
target=_blank>网页特效</a></td>
+ b1 o( ~% ]0 ?2 L7 A. W </tr>4 V+ i6 h) `8 b: ? A- h9 D
</tbody>
5 ^8 L" X; a( z% k/ S- a </table> |
|
发表于 2008-1-21 20:52
|