|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
* l8 a2 W8 g" ~7 ^! p0 e<SCRIPT language=javascript >& S+ [! f" i8 L! i; e
document.write(
u6 b4 F- f: J! s3 q"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\' `$ b) P1 \- I
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");) d ^- m `, h/ U) ^
! I- s3 R$ N/ N7 q- Kfunction showtip(text) //显示链接的说明( p4 d7 _1 _ H" C+ r& z* w% n
{
. ~& G" e* t6 A( t$ f if (document.all&&document.readyState=="complete") //针对IE; I- ^+ T4 h# Y4 z& b
{
6 P u2 z8 X/ h1 p8 }6 P7 c' } \% d/ ?1 t+ K( h: s
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
; i6 y; T, n) i" H7 ] document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;+ u* z5 W6 c. h- l; g% j: d% ~
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;# U6 O. g) |! e* V, O
document.all.tooltip.style.visibility="visible";. m g4 F+ z; C# F
}0 q1 C' p- X( Y- p- r, q% p# h
}
& s- ?- j( @8 C2 x: e2 b. l, l+ g; P, T- b+ O6 ?& _! O7 d! U7 t+ E
function hidetip() ; E; _) i% C R$ J: M' q
{
4 V; B% _8 K% K rif (document.all)
5 K) N: j1 ?' `3 I4 _1 T document.all.tooltip.style.visibility="hidden";
7 D% w) s( Y# ~7 b$ |& E}& P" o* m+ Q" B' W
7 l M$ J7 ~1 S2 ifunction setcolor(fntcolor,bgcolor): |1 |% @2 J+ }' t+ g' ]2 I
{( m5 b4 V% k+ X9 Z5 u' O$ z0 N4 b
document.all.tooltip.style.bgcolor=bgcolor;
8 x! q ~. o6 C7 I2 d/ A2 W document.all.tooltip.innerHTML.Color = fntcolor;
) g; x5 _% w+ E# I5 X$ q6 x+ _( k$ r}* L( e1 R& n2 u+ Z" o5 G
6 `* h; S- f# B' k2 J# F' C# B
function showhint(text)" k0 t+ p. E1 ]$ J& Z
{
- C+ J9 `' @) U+ F7 o- p9 p8 c onmousemove=showtip(text);5 j( Y* J) M+ U* q* C
onmouseover=showtip(text);" T6 D! [# b- e
onmouseout=hidetip();
2 L7 _3 o* ^% ]! {! N" W5 C}: J, `" B; I. n: {6 R7 ~3 R; p8 P
</SCRIPT>: D1 L5 `; O& V; q
* b/ e+ M* K8 \' l* ]4 v
0 M- L/ C, G, ?) Y0 I8 [0 \( @& [
8 }* v3 L7 a$ H3 M6 }
" o4 {. R. E, U* M R Q0 f7 Z' q1 ]" o5 x
二：将下面的代码复制到〈BODY〉区% K( R) |& r; x2 T* I; d2 c
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 2 @3 p& k3 }: t2 Z( ^
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">; G. v8 H* ?, `- I6 r0 T
<tbody> ( ^$ N3 H( G/ g# F7 i. d
<tr align="center" bgcolor="#ffdfd0">
. {; ~- R& g0 `) H <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() 3 o: S- t: E, g1 ]; C% ]
target=_blank>赏心悦目</a></td>
1 w* Q: I# n% G9 W! C <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" / M; Y8 N: | I$ h
onMouseOut=hidetip()>网页素材</a></td>
$ x+ e+ n7 `5 @1 l <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() ! [2 S/ a) _% \2 `2 s
target=_blank>图像处理</a></td>9 r/ ~0 h+ S% a, X$ k1 Z; e9 H
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
5 k9 P) p3 i" G: Y+ C$ m target=_blank>网页特效</a></td>
' k* d3 R, Q r2 _- ~/ [ </tr>
% S, U. {0 p) z6 \1 X% L+ k </tbody>
6 s9 y2 ~8 u7 X) q& E </table> |
|
发表于 2008-1-21 20:52
|