|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
% ^" Q# @) f% w6 f* @<SCRIPT language=javascript >; N6 ]3 \9 [* b7 M/ p
document.write(
. x& B: a8 q5 r9 {"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\5 O! T0 M, q4 N6 N
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");; g5 B% o: ]( c% H$ ?9 T9 F
# q. b3 k! E1 p3 D. Z6 H! T, S0 Jfunction showtip(text) //显示链接的说明$ K# C& e0 c; n, w# |! W
{
6 ? D% ^. T% S/ a# a0 R if (document.all&&document.readyState=="complete") //针对IE
% P k" o6 z( c5 w) @2 r2 ] {
% U. V# J0 x8 D- c' [
& }$ R" E1 Q+ J4 n4 [% K& |) l document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";6 [2 F k& U2 c- l) s; o+ `& T
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;5 D! X5 r+ P! u3 X. e% i
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;" ]& B" Y; d. g5 n
document.all.tooltip.style.visibility="visible";$ f1 B5 Z$ u) k4 o' `' w
}
9 S8 y5 r8 \; z4 Z- t}
0 V- i) x" T: Y/ V% A7 l/ p5 N. [- q. o
function hidetip()
: x* ?3 f. g& m- x7 e3 P/ K8 ~{
2 W8 O( _% l" r% L' r, m% zif (document.all). Y# G0 V" V' s
document.all.tooltip.style.visibility="hidden";) j; [) A: M! V! r6 I( ]
}
, L5 q" R4 w( G7 x2 b0 x. B( u$ N. k- a2 M7 ?- p/ b1 b
function setcolor(fntcolor,bgcolor)
& q- K2 C- ]( B' U5 e9 a) J8 Q( t{
* q' ?4 j, h1 K4 Z7 ]+ R7 q document.all.tooltip.style.bgcolor=bgcolor;
7 \; a }* a2 X! ~5 L5 {/ n document.all.tooltip.innerHTML.Color = fntcolor;
5 T8 U7 \! e5 R7 {, D}
. D b% i1 J" |$ ~9 \6 Q# ]* a# f/ b# o
function showhint(text)4 {$ M. n' X1 r, r+ u1 D F7 G
{
& s( Z( o' N( [2 T: M3 ` onmousemove=showtip(text);" e }: i( u7 H, i
onmouseover=showtip(text);6 L j( [+ ^# J/ u' {* ~: }
onmouseout=hidetip(); P8 x$ V' D: q( t( i" z
}
9 b* n0 V* \9 |</SCRIPT>$ |8 ~3 E: [" b: Z
' p9 N% C1 V& K) G7 J4 `
+ v# t+ r- D8 k! r7 l* m- U4 @) P$ C: F/ d3 a2 x8 h
p }9 E9 F1 ^$ r+ ^5 R2 K
8 t+ `, T; p* d$ p$ `" Q
/ j' U/ x a: G" c5 z二：将下面的代码复制到〈BODY〉区
0 E& |/ J" e4 Q2 @<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
# d' G: m, Y* j. j" ycellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">* c6 |4 C) k: Q
<tbody>
( \, O4 x$ i5 H" U0 b+ x! D <tr align="center" bgcolor="#ffdfd0"> # ?+ s/ E8 A j+ ^3 P# s
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() * ]7 ?' u$ W' b0 S4 L7 \/ `: t
target=_blank>赏心悦目</a></td>
: D- j. q3 H& r% m0 H, B <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
- G7 u; t* v) B$ g2 Q# R onMouseOut=hidetip()>网页素材</a></td>
: X/ Z0 k8 C: h: v3 ` <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
$ O: k+ F S* m( z target=_blank>图像处理</a></td>$ L" l) d) K0 W% O
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
) E+ v" M; b$ l target=_blank>网页特效</a></td>
$ n7 e6 x' w& ^0 G7 b" ~# C, Y# M </tr>
: [9 {- u& A8 t/ K! W </tbody>
6 ~ e1 ?$ R+ k! k5 U </table> |
|
发表于 2008-1-21 20:52
|