|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间; K' G/ @ f q2 D& p
<SCRIPT language=javascript >6 z* h7 w5 K- X" h8 x( i0 i
document.write(
5 z/ [2 b. [, Z3 _7 }2 k"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\2 @& Z7 C+ |, ~' ~
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
* G& G4 w& L4 O5 [- n1 t( ?- S+ W1 z" K" K
function showtip(text) //显示链接的说明4 P8 x/ m% U; r# S% @4 H) }
{ c( T( L: n A6 j( W9 M* J" ^
if (document.all&&document.readyState=="complete") //针对IE5 O2 |- S5 z+ t. s
{$ X; F2 j& p4 ?# h3 Q
' J5 i3 A( K: j; J& }
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
7 q0 N/ }( T! y7 r; b( M document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
2 z$ f4 e3 `9 Q8 b# c: L- L8 ~+ V8 j document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;9 u2 P& h) R3 a
document.all.tooltip.style.visibility="visible";
9 l; K, C% e& w! F, C } K$ A5 f' w% M5 s
}
* q( f2 F. @& c; `1 N( g: K7 T- W- {
function hidetip()
% b2 V! T; u- k{
' y1 H+ p) b+ Z2 J4 [. O a# N" wif (document.all)
/ W% V3 x9 a+ y document.all.tooltip.style.visibility="hidden";
# U: m- a9 \4 \: N; u2 f}
/ Z- Z5 J! T4 b' I7 `! t& `& @# z9 ]" v) g2 X# ^+ ]
function setcolor(fntcolor,bgcolor)- }2 E# e) m' Y% W' c0 q" K; q- c
{
5 \' R$ ]4 g+ n7 E. L document.all.tooltip.style.bgcolor=bgcolor;
/ V f$ x8 ~( H6 L' K, Z7 a' K5 { document.all.tooltip.innerHTML.Color = fntcolor;% U1 w% p. _9 |" G4 j8 P; i9 p
}- i) Q, g& Z$ t* q$ N
# t# y: }! s+ A6 o0 [8 J1 Mfunction showhint(text)# r. X$ l; A- Z5 y& O
{( I) \4 B: y5 } o
onmousemove=showtip(text);7 o6 @2 |3 i/ |0 a! H
onmouseover=showtip(text);2 p3 M; w% L" o1 r1 r( _
onmouseout=hidetip();
/ G2 y. t6 Z/ N/ [' [}
( z( j" `% P1 N9 p$ ?/ {</SCRIPT>6 {7 N2 u5 W. U3 O
, |9 @1 P, y: Q) E% D- X- E' l$ _
( }9 k- v% o- } w1 N9 N4 n0 v3 h0 m: ?$ i
5 @+ T `7 R9 h' Q4 J; e% n* _$ R6 C# J h: z! F
8 J7 e* d; V2 H$ k3 U+ E; Q
二：将下面的代码复制到〈BODY〉区
3 u' Z5 S. @# B$ U4 M5 t( p( P<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 ! V2 ~" W9 x, V: T
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">7 k% g8 D2 ~* P
<tbody> ! z' m! |" d3 Z7 e' p) q
<tr align="center" bgcolor="#ffdfd0">
. b' K! D! G% B) ?& q# c' E3 d9 ? <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() 9 |: ^# D7 t: v& A5 ?
target=_blank>赏心悦目</a></td>! D! j, R6 h5 L
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" 6 Q" x9 u0 Y% W& E8 o8 P
onMouseOut=hidetip()>网页素材</a></td>
3 N) S/ D0 j9 _6 p <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
9 o6 l% f, V0 R7 V9 b; m' u target=_blank>图像处理</a></td>
# S) B6 D8 V/ h) P/ G8 x0 u# O <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() & y# ?5 V# E& Q% w7 V- ]% T8 v
target=_blank>网页特效</a></td>
2 o9 M1 o1 e7 {) o8 C </tr>
n% N' G9 }* I6 E2 w! k </tbody> 1 T( l5 N0 e& S; A; H
</table> |
|
发表于 2008-1-21 20:52
|