|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间, C8 b* [) c3 e( }! ]4 T2 x
<SCRIPT language=javascript >3 H/ p7 I3 ~7 Y4 G5 E
document.write( q' {! \/ O' r/ ?3 O; k$ X7 F
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
/ k. K2 ]/ x' m c$ s- J' c5 F4 i;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");! ]2 k* O0 N& s. R
( {& }) N# b \/ ^# p" Z$ Y5 Qfunction showtip(text) //显示链接的说明
$ j* V: f: g5 W8 }2 t" r7 D, d ~{
3 u- v1 |( D# q if (document.all&&document.readyState=="complete") //针对IE; B# y, v6 t% I# s. b4 D
{
' |+ a2 v2 z# u: N+ ?
$ o7 f0 h6 `0 L# a8 r! X; o document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";9 x* k8 P% s2 t
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;3 V" X* [8 R. n; E B
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;* T, u+ |( K4 `& Q5 _
document.all.tooltip.style.visibility="visible"; b- T* J, h: W8 O3 v9 S( {
}
x+ T7 x' U" {. Z6 J1 W: h9 }}
* @: f6 l' m6 U, l
" j J& z7 y/ T2 c4 z9 Kfunction hidetip()
, [) D* r9 y5 c- [" ?1 M{
' U3 x5 a4 B% p1 Bif (document.all): w# f& @2 x6 {8 s* ^
document.all.tooltip.style.visibility="hidden";0 x0 K8 C; d$ P( v5 e
}+ g" `& Y% ?, s6 c& k
L X+ ^' n9 V: sfunction setcolor(fntcolor,bgcolor)
* p6 ]6 \" x3 u3 \9 E- `# I{& M' G, k& h8 O8 Q0 x
document.all.tooltip.style.bgcolor=bgcolor;
F6 s, W& _2 @& t* } document.all.tooltip.innerHTML.Color = fntcolor;, Q' i$ ]: A5 j& K1 `
}
8 k/ f4 Z2 @0 d7 M" e' L" l& @5 U) B6 N
function showhint(text), P3 u6 M; n; p! J4 l; p
{
- Q' v! M' L# r- A T- ~4 Y" M3 ]+ U4 i' S onmousemove=showtip(text);
* x8 m" @) B/ O, E4 S) R- P9 r onmouseover=showtip(text);6 L4 T+ [3 R/ G6 [4 C. U
onmouseout=hidetip();0 X; K$ o- f" S
}
/ k( a M: S& s4 r1 r5 i</SCRIPT>0 q# V s: \; l# q; _, t
) ~4 @+ c! @2 A. t- A M
+ o# s) [) q, b" N& c. e* D1 ^/ {$ H- `
/ K; _5 n+ C+ v
- v" t7 |+ W+ F/ B2 ], R1 j! v$ B) {, {0 ?# `+ S( Y& X% _) o
二：将下面的代码复制到〈BODY〉区 b% M. e9 j0 Y* E
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
$ W# f8 u2 a% C1 Q6 L' Fcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
' C% ]+ G: @2 a, U <tbody> 6 ^! x3 y* M6 t$ m7 \; \! j8 l F
<tr align="center" bgcolor="#ffdfd0"> ! S: j) g4 C: [! f. ~2 r) i$ ?/ B
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
4 s" k0 A1 j9 J4 f target=_blank>赏心悦目</a></td>" l3 _5 b; \0 B* W
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" ' E" m' [- N2 r: k) P
onMouseOut=hidetip()>网页素材</a></td>" g% |2 G9 F( d. Q5 _% x
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() + [1 q6 W: }, H) k; G. d
target=_blank>图像处理</a></td>
7 P" s2 u. G: f @$ X9 J/ [ <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 2 s4 K1 b( O* H% V" V) ]" x9 Z
target=_blank>网页特效</a></td>
0 U2 k3 E" n9 a" }4 T# N' z' y </tr>2 \# j4 P& s6 j5 j; V' N' a1 T" b" T) b
</tbody>
8 V( n8 Y) r, s8 x7 U3 V0 v </table> |
|
发表于 2008-1-21 20:52
|