|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间! w: y* A$ T- w) h& u# {% p0 Q
<SCRIPT language=javascript >
' [- O) ]& x. H bdocument.write(, H- A! D* e2 b
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\/ F4 @# v8 d A% \' ]
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
9 N6 O6 i2 i3 `! b2 H: [
3 h3 I8 {2 X& W; Xfunction showtip(text) //显示链接的说明
! e5 \- D# K5 [2 d{0 H+ {! `7 ]( w0 d0 m
if (document.all&&document.readyState=="complete") //针对IE
" n* L# ^: z7 a. k$ P/ a {$ g% w' t# P4 Y$ s! S
, A: g9 k1 r |0 e
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
8 V, G2 L, d: }6 g8 ^# p document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
+ W2 c# p4 ~, Q0 t( T document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;: S( i8 z( Y' h6 C2 g
document.all.tooltip.style.visibility="visible";# L' k7 O7 S& }) i3 e
}
4 D# y% F3 B K! W}
9 r( Z+ ?/ i9 j% @, m6 ?5 D; _% a# R7 m! n; U
function hidetip()
1 T8 g" t# J/ h# t{
* `) i9 @! a* a! Zif (document.all)
) |* N) q9 i5 s% X# r5 L# L. F4 ` R document.all.tooltip.style.visibility="hidden";
5 S/ Q% D5 g4 J/ H( D+ w( X* t+ O}- V6 N' |2 M( G6 K; s+ M, t
4 c8 b- e4 b, p) `% \7 \! i! J
function setcolor(fntcolor,bgcolor)
3 I. x: g4 k% n# @{8 ]7 r! \, n# D, Q4 g* Z7 H& Y6 `7 Q
document.all.tooltip.style.bgcolor=bgcolor;4 C+ ^5 Z C$ s# B
document.all.tooltip.innerHTML.Color = fntcolor; ~. u+ H& F# @ ~/ q' m+ F" O9 v$ Z
}
& }( j, f) G3 S8 O4 u: j3 o! b9 Y5 c) _
function showhint(text)5 t( i' d* O" ?% y4 H+ z
{. E( K/ ^1 F' G0 g6 L
onmousemove=showtip(text);3 V: Y! F! O5 g S
onmouseover=showtip(text);. p% q" n! y4 K) [
onmouseout=hidetip();) d Z4 |% ^* q, ?' {* p
}% W3 P( F7 x9 e" [( K, P$ f6 J
</SCRIPT>
+ s+ c6 Y7 r9 c* p* u4 v/ V) |9 n/ q7 j( q/ [
7 m& y) i9 |0 v9 M. |5 U7 ^+ _ E* K: Y) r- J* y w4 D6 j2 { L9 g( ~
, h; C/ `. j$ Y. i/ {$ W; X l& Q
* R. T* U8 G7 i, W
+ k& {& {9 Q: g4 n& |% }: ]
二：将下面的代码复制到〈BODY〉区
+ t0 ]6 w% t& E$ z; {% L* C<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
1 o9 O# H) D" @" Kcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">+ R" `: B( q9 ?+ e+ P' _: ~
<tbody> * t* A3 f" W' v- }
<tr align="center" bgcolor="#ffdfd0"> 7 ?/ w/ d: P+ h2 b
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() 9 U& U: s0 E, o) I- M& @
target=_blank>赏心悦目</a></td>* T2 B1 v% p4 z9 `
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" ; }( T7 D) `+ K* w. `
onMouseOut=hidetip()>网页素材</a></td>4 ~& |" a8 I) ?" o% `. x' G5 X
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() & a) | r+ \2 ~% f3 @
target=_blank>图像处理</a></td>
) `$ m6 O' v/ U <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() ! ]5 _. S7 o- t5 Q
target=_blank>网页特效</a></td>) c2 C+ I1 d$ a# w, n% `7 t5 x( @
</tr>! c/ y4 }+ c0 Q. D' T) e3 _9 b4 r
</tbody> + [$ t% i2 @+ L) j
</table> |
|
发表于 2008-1-21 20:52
|