|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
1 D2 w* L1 |- \ I5 \6 ]. ~<SCRIPT language=javascript >" z! Q% z2 ]/ X3 V
document.write(! a5 |) T0 J" r4 x
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
& J( B1 \- O9 O9 d2 X1 r, l' s8 m. o;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
8 J3 e- T4 ~4 u8 h4 R+ p1 j7 q2 q2 ~, U' Q! d4 Y2 M
function showtip(text) //显示链接的说明( C' d+ [0 }! n1 ~# W: m
{
$ i. \6 q4 T# B2 J9 o if (document.all&&document.readyState=="complete") //针对IE4 s: f+ ~7 E# G: Y) F( e! x0 s
{
+ F: K" O! b/ h * ]3 z; |: d: q) j' A
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";& e5 D; z5 X% t5 S: Q9 c3 ^
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;' }. @+ i' G0 m. D" ^
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;9 L8 x3 Q4 h3 H& j6 k) v& r
document.all.tooltip.style.visibility="visible";
5 b, W: u# I" ~% o% t9 A }5 U! n) n+ o7 D! {; p
}0 w4 [) ]4 W& a# |2 z- B) c
5 w- o* x7 B+ e, e b
function hidetip() 9 a1 ], P0 V4 D
{2 Y; Y: ]! ?) w G$ J; r
if (document.all)9 U+ q7 U4 |* U$ |" V
document.all.tooltip.style.visibility="hidden";! T% Q9 h8 L) U2 x7 l* k1 d% \& R
}: y' G& H2 Y0 c% o' S: c( U* ]7 C p" y P
2 _9 W, i2 C5 ^! }$ O, S1 e
function setcolor(fntcolor,bgcolor)
1 ^! z0 V- j" [; c{( t2 E3 L& Q8 Q. O. h" ~
document.all.tooltip.style.bgcolor=bgcolor;0 S% A) a5 Z& q
document.all.tooltip.innerHTML.Color = fntcolor;
! M) p3 y# h) P* @1 y1 E$ g}
0 y# \! @3 s3 W* T6 H! U% r# ^3 `' M% S' N. b; ~
function showhint(text)
' J1 _" n9 |9 W, E+ N4 N{& ~' T( {/ a0 x$ P* M+ c
onmousemove=showtip(text);
. E6 b6 Z4 t) K$ {- V1 |* I onmouseover=showtip(text);9 N" f& b) S/ u6 {
onmouseout=hidetip();
4 U7 }+ \& B3 X# v% I) @# T5 e, a6 T}7 p2 T3 Q, {9 t5 F( A
</SCRIPT>' e- Q* R+ _/ P0 {
Y! t5 t0 Q ?* J9 O, L* {$ R* }
% c1 Y& f3 z3 x9 L; Q( |4 x9 B- j: Z! Z" X
1 {6 B& T0 Y/ U8 Z( n2 h3 p- [% t) i U
二：将下面的代码复制到〈BODY〉区3 p+ |% r3 l$ i _0 x; _0 e. x, b: M
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
) @& W0 c" N* U* J, Z1 ucellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">5 A- q- ~, }, b5 E& f5 v
<tbody>
1 W O8 X" m, Z9 T5 h; ? <tr align="center" bgcolor="#ffdfd0">
9 i! r5 Z" }0 W0 v* H8 g <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() ) @2 F5 m1 ?( ]1 H+ g
target=_blank>赏心悦目</a></td>
' |# m5 p8 a0 i2 n <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
4 u& \2 |% D& `5 Q onMouseOut=hidetip()>网页素材</a></td>
P3 ^) V: Q4 f+ s <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() & I/ ?+ w0 J% U" }8 n, _7 ~
target=_blank>图像处理</a></td>/ l; B/ v( U H( o$ W- F& x
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
# [% W" c( N3 i, P target=_blank>网页特效</a></td>
" Z5 }) _% C/ X6 Q. l/ L4 [ </tr>
$ V$ }% E; ^/ D O! G' Q! c# H6 } </tbody>
4 V' X/ f4 ^1 I( Q </table> |
|
发表于 2008-1-21 20:52
|