|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间, ?, o! Z9 {$ A" A1 ]! v
<SCRIPT language=javascript >* U) K1 _) W& [ E. A5 F, s5 _
document.write(
0 B( t& |1 y3 h"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\- ~; t7 }- B" `
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");! |& a, K) Y# ]3 A& f7 B
3 H( R" J& I9 T6 wfunction showtip(text) //显示链接的说明- }) \$ X# N; u: k# x0 d
{
! @: P) Y1 E4 W" [" a8 C3 X if (document.all&&document.readyState=="complete") //针对IE$ U% x# O% i8 Q6 x- a
{
9 {( O6 \6 ]6 E% [6 }) G7 ^
& _( W: P7 e/ i; A% C+ H document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";6 d1 A. k% M, G3 G1 v
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
7 E8 G+ C1 I2 C: [+ O y document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
2 ^; J- Z* ?3 l I document.all.tooltip.style.visibility="visible";
5 W8 Y! K6 N+ H8 E9 A) O }2 G) r* x1 s0 w& ], x# t- o( `
}
& X- {* _4 ^9 d
6 I- M* \" X3 b& r) \# N8 [8 N! \function hidetip()
- ~) A4 S& t# R5 M, _* c( J/ F{3 ^# h6 K, L/ k B2 V4 ?$ }
if (document.all)* K1 V" ]7 Q. A; U {& d
document.all.tooltip.style.visibility="hidden";
! Z/ N; g- P6 B+ Q}5 O) ^# S3 ]6 t7 n! Z1 r
0 g) ^- g/ s0 nfunction setcolor(fntcolor,bgcolor)& G) E% T5 e9 Q- D1 Q+ v
{% ^; j6 t u7 ^3 S, E$ G' K
document.all.tooltip.style.bgcolor=bgcolor;' S# }' e8 j9 e3 d& I8 w
document.all.tooltip.innerHTML.Color = fntcolor;% h+ \: ^# G* l. \5 t/ d& z. Y3 B1 z/ e
}
$ v7 L s- [! u* a9 \0 w9 `' l* `* D8 o
function showhint(text)
* I0 L8 `$ ~1 \1 a1 S$ I* Y{
- m6 H. Y' K9 n2 v onmousemove=showtip(text);2 e! p( O% ^* O8 e- V
onmouseover=showtip(text);" G2 _3 O9 o- g* w
onmouseout=hidetip();
4 |2 x4 o, G1 o- d& D3 n! M}
1 `7 J; O" w; s7 q7 _</SCRIPT>( i8 ?. V7 A- S2 g+ v
* g; _& u8 M5 Z$ ` x7 r
* b8 ]. o3 \, [# ]2 z: e! O8 W9 O! r
4 F! m, U. L/ I1 i. @, T' x
- @, K9 y2 I1 V2 A& p7 O3 N N
& W, }3 U0 J. ?+ o6 V' u$ s9 p/ e: f4 @0 ~- R* S3 r
二：将下面的代码复制到〈BODY〉区3 N, l% K8 @+ o. X
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
2 \- J% b! L3 b }: F u, R7 j0 c8 _cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">: F* x* h* v2 d
<tbody> : e- k5 s( v$ I8 {: V8 R6 I
<tr align="center" bgcolor="#ffdfd0">
, n( ~* j! A t8 { {& Y <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
2 p5 J7 _& e1 y/ j, Z target=_blank>赏心悦目</a></td>
( t: O8 Y5 e/ t <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
1 Q7 K8 n0 B7 l0 }6 r onMouseOut=hidetip()>网页素材</a></td>
% V. y) _) R* w# P/ h+ K: D$ a <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() 7 z6 p" }) Q* [0 z& I) l7 h" R
target=_blank>图像处理</a></td>+ k) n* e3 d, z2 Y1 ~# b
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
' P* L& q [/ u W4 {( b target=_blank>网页特效</a></td>
. Q6 R; x6 A# [: H </tr>
8 G5 X* ?0 O( n6 h, O8 ]0 l0 H# R </tbody>
# M) Q& Y/ c6 Q6 ^ </table> |
|
发表于 2008-1-21 20:52
|