|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间* @7 L/ H+ ?7 w2 k1 w$ y. m }. E
<SCRIPT language=javascript >
+ e/ d4 d2 G" ^) a+ _8 F& adocument.write(: [2 [+ F9 e t2 L2 t3 u
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
9 T$ ^# C+ L4 l7 @$ P4 M;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
6 ^6 ]2 b+ }* y+ u/ l7 _" V* A9 Z7 R" ]0 P P: D8 z
function showtip(text) //显示链接的说明
4 w7 x$ i5 M! B7 l$ t! u: Q{
' b3 F; b1 V& D _6 a% Q1 a: K if (document.all&&document.readyState=="complete") //针对IE
" ~# T' e( |' D. C$ y; d {: N: _* R& f% t* q+ h3 z n, ]
( i! X. ~ @' ~4 w3 t3 H+ W3 O
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
! a; H- c/ V7 O$ N document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
( d6 i) t1 G3 V+ q: V$ R1 d document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;. t8 k' O' @9 j2 d. ]: K$ s
document.all.tooltip.style.visibility="visible";" K O/ ?% s! @* b$ G+ T
}
, s8 [( w2 q: G8 e2 y; A}/ O. N" d, O Z9 }0 H* Y9 n: @2 C
8 _0 G6 E/ Z1 m2 H! Yfunction hidetip() : ~( @7 ]5 }7 w& G" P
{: [2 H' e* m: b
if (document.all)
9 h9 r" w0 y# e" W- c1 K% ~ document.all.tooltip.style.visibility="hidden";( b$ E. ~3 Y9 a
}, w3 K8 z' k" [/ C: w2 Q
8 m/ ?3 R# H3 m7 O- p/ h* Tfunction setcolor(fntcolor,bgcolor)
! z9 M; H5 e8 D1 b) H3 O/ h{
; ], F1 W, [, _6 ?' E$ ^. M2 S document.all.tooltip.style.bgcolor=bgcolor;5 ^; d. y) x( o) \
document.all.tooltip.innerHTML.Color = fntcolor;
# r+ ^2 P: A& q. v8 d6 s: X}: x. r6 Q. P% e$ d+ R6 e* |
" s$ A* u* A* X, d% }6 yfunction showhint(text)( v" M) u. S! | q! }* T2 `
{
: q& R9 a# T1 y `" U+ R4 a- k onmousemove=showtip(text);
! W$ |9 z7 @: M9 ^; N onmouseover=showtip(text);# `: U% f6 v# s9 x
onmouseout=hidetip();& {% s2 N9 k( z$ \6 _" j
}7 T8 r2 L2 J" x0 u5 K6 u
</SCRIPT>
- i5 g6 I9 z! ]0 o n/ R
: |' \+ w& X+ h7 o' F0 ~
0 T2 \ ~0 J- x2 Y0 }* _$ ^' D' |6 f* e8 c3 c/ O; v0 t/ K
) O) h3 `' x: s5 X9 e5 o @- O# G# K( g+ j! w% P2 j. K$ R6 V% a
0 [3 N! f! g4 { F& p# Q! a' }; E二：将下面的代码复制到〈BODY〉区
! f; a @2 N( T" Q8 y( ^. k% H* N, w<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
" ~: \+ _5 F# e7 i* C7 [6 Tcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">* V( ~8 D8 l: ~6 R& |& m1 m
<tbody>
0 d; Q# p2 b+ `& h0 b <tr align="center" bgcolor="#ffdfd0">
4 s- d S/ o0 r5 _) ^ <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() & l1 d$ b1 f/ ]: p" n8 R4 M
target=_blank>赏心悦目</a></td>
& d3 M0 Q% Q9 U <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" / M5 I. g4 e1 o" l: \1 J) \* U* B- v
onMouseOut=hidetip()>网页素材</a></td>
( r& R& t6 ?/ b" j/ ~ <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
# t1 V9 W; X2 _) ?( C target=_blank>图像处理</a></td>
" z- j/ P' Y: ^( C( j" |" a <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() " }! L% M1 Z( p/ ?# a* [
target=_blank>网页特效</a></td>( Z" h& q7 k9 C
</tr>
" |8 I$ ~7 I1 \( Y) t </tbody>
/ i P* b% ]1 p1 B </table> |
|
发表于 2008-1-21 20:52
|