|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
' c* D4 X/ ]. S/ d/ ^<SCRIPT language=javascript >: S% I' m% @/ p9 p
document.write(
. O% |+ i* B" h- K( I9 h( N"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
: h, q9 e6 d! ]: M7 z( y;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");7 V C' A, y- b& W' n. o$ {* B
" M8 S- x( P4 w2 Y2 Hfunction showtip(text) //显示链接的说明
& r3 ~8 ?: c+ W2 z{5 }! A6 p. K x$ \. k
if (document.all&&document.readyState=="complete") //针对IE9 e m/ Z8 [- G% {- l
{7 y0 N0 T, `4 b* Z* P+ L
1 H: J$ J& z/ W; ~3 L" { document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
! }8 }6 P9 ]% a( c$ S/ Q document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;* C& l/ T1 f, s4 t* P5 O$ }( _
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;4 F* _* i7 o9 d6 s/ _, r* l
document.all.tooltip.style.visibility="visible";8 o$ j* v8 S+ T& a( N) X+ m
}
# w) q3 [/ Q9 R+ [% Z}
6 h1 B1 Q. m( X2 {2 C8 q+ L/ _" D3 N% G8 L6 |
function hidetip()
/ N- s' j1 m& |; D: p8 P{
$ V) ]+ E' d6 ^if (document.all)
* u% d" [- |3 Z* j5 S& u& T5 R document.all.tooltip.style.visibility="hidden";
. H7 q; y* J' o% m}
6 {: S' R+ U8 z$ I& B& e
0 O' a' X) b$ Xfunction setcolor(fntcolor,bgcolor)# Q8 q. K: A* Z8 e5 L5 t
{
9 f$ R E) F9 ]9 \& B document.all.tooltip.style.bgcolor=bgcolor;" u/ C, K9 m% Y3 O/ C
document.all.tooltip.innerHTML.Color = fntcolor;6 ?$ S. z" j5 }+ A, e f
}
. R6 a- U4 p2 Z5 ]5 f8 [6 j
+ X" Y# ]9 l/ A2 cfunction showhint(text)
8 M/ i# b# `* d2 w# m" g; v{
: U8 o2 [0 H7 M4 T% w) P8 t- X, B onmousemove=showtip(text);' }+ E2 V0 M6 i+ N$ W
onmouseover=showtip(text);
& q+ G& D4 u: O( K9 Z' t7 l( v onmouseout=hidetip();' s4 M4 Z5 ~2 |& L0 w. I+ v
}
: f( T! k2 U, [( C. h* r# D</SCRIPT>- W" s* c2 I$ ]! R, w3 A# T8 p! t
9 |$ a: K% Y2 W) M9 y. F) e+ H$ l) t% P% H5 s/ X! g9 z5 ^
2 M* d8 Q/ m( ^6 _, Z
- ]) v' b' l$ z2 Z. W: D/ d' E4 L1 V3 y
9 }5 a6 ~2 M3 K二：将下面的代码复制到〈BODY〉区% }6 P! e) o- u* t$ N. P% s& e
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 5 `/ M( }/ G$ J8 I4 c- z& q
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
4 |$ s2 f7 p5 z$ C' M <tbody> 3 V3 e; i, V$ g" T. d3 `
<tr align="center" bgcolor="#ffdfd0">
2 N! `' i; t+ H$ d <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() 1 P; x8 u8 b8 e4 ?( t
target=_blank>赏心悦目</a></td>
- I6 j. i Y( H7 ? J7 L9 r* z <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
- w+ e: J' [% Q0 q2 e onMouseOut=hidetip()>网页素材</a></td>
9 L; P, U1 H5 }. @5 I: Z <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() 6 a8 G( G6 ?0 b! Z) w( `
target=_blank>图像处理</a></td>+ ~* ?( l' ~3 }/ ?7 k( r4 U* r
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() ! O6 ?( }1 p" e6 l2 d
target=_blank>网页特效</a></td>' E7 g1 l& @) W) T2 X5 f+ S" h
</tr>
; k0 l% n9 t+ M* w, g& ~* l( H9 r+ ? </tbody> H0 i- v5 n( q, D
</table> |
|
发表于 2008-1-21 20:52
|