|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
' U. G) t! @0 l: S0 h2 P! }$ F<SCRIPT language=javascript >7 D1 y6 N3 r" Y/ k7 Y' W
document.write(2 C( s& E0 c \' D6 h6 R& k
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
, ?$ X; \/ S' R; f! o' _6 O1 i;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");: P# o7 Z) d6 v. V2 \; m
D' _3 V( Z1 Yfunction showtip(text) //显示链接的说明
# L6 y: C# N- W2 F* ]% ]{
F; A3 W z1 b if (document.all&&document.readyState=="complete") //针对IE
- V8 M( F; p0 V! Z6 n1 i. H" n {$ [& V& a7 I- C( z
; k" A2 O3 h9 V& K
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
9 T/ v8 Y# o$ J, Q) c document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
" R6 m" O1 Q% E" v- y document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;2 ]) z: p0 ]' i3 r9 O+ r
document.all.tooltip.style.visibility="visible";
% M$ r0 q$ X2 O: D6 Z }( t$ Z( C, b! c. Y
}" ?7 y ~* R' m/ z3 g; P; m
+ A0 g: q' F8 I6 D, r
function hidetip()
' l/ q, J% |( \* K: F, L, L{
% `% S* ~! Y- ]- {0 Y# Jif (document.all)1 Y: [/ x7 O6 e6 F) p& O- O4 \6 c) e
document.all.tooltip.style.visibility="hidden";
8 |/ ^. b& R+ W" r, R$ C}
4 d! u: ~, g- e
6 p" y. o, {3 Zfunction setcolor(fntcolor,bgcolor)- u+ x! i! J9 S' k7 E- }
{
: \2 F$ R* N5 v) P' d5 u: j document.all.tooltip.style.bgcolor=bgcolor;4 [" U+ Y Q; L* C9 m7 M z _
document.all.tooltip.innerHTML.Color = fntcolor;
8 ^8 V% J# e- k ~}
1 y c: b+ e( m: G: c* z& g
& q6 v; e$ Y. M- m3 _; ofunction showhint(text)8 e7 v1 |5 _: A' l: W! {8 P
{
0 e! m% K1 V% e: u& G4 Q onmousemove=showtip(text);# I6 E. E; [4 v3 K8 O% e" ^$ t
onmouseover=showtip(text);9 [( D; j! M0 q4 ?% P% G
onmouseout=hidetip();
% e% Q' ?& \6 d( B}
* u2 d7 k9 H$ h) H7 j/ ]3 J</SCRIPT>9 ?! h) t3 i8 u- U
) [ W) o: L$ c. M$ T. F# q1 H: a1 y
, T9 Y! h7 Z5 ?9 ]" {$ e+ p# O, q
- a% a; y5 |* s1 P* s, ]2 T) n W
+ L b' @$ ~$ d+ Q6 [" |/ J. X" H
/ {, E8 f" v/ N M; m1 y二：将下面的代码复制到〈BODY〉区, l- ^1 w9 a0 n, F# K$ l6 y* W& L
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
/ W0 Z7 [ W4 ~ f" [/ T5 |2 C( Y; Dcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">& ]8 \+ K" R: P5 B8 }: R/ [
<tbody> # `- ?3 S; s6 a. f3 o- d3 I
<tr align="center" bgcolor="#ffdfd0">
4 `, V( l( A: \& B2 W8 _ <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() 7 y/ F, u% _. \& Y/ r, F! B8 }9 L
target=_blank>赏心悦目</a></td>- k) l$ Y7 O9 j# U* K r5 I
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" " | ^7 o( c+ p9 A- q' b
onMouseOut=hidetip()>网页素材</a></td>) T- j" X5 Q' A5 N
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
3 Q9 R5 Y$ ~& |2 @$ y9 i target=_blank>图像处理</a></td>
. t6 I2 T! e' S! j <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
" d! [& h( K+ ~ target=_blank>网页特效</a></td>
% Z2 h% r! {& M: E5 g. B </tr>
5 e! L6 N# }: Q. V. o, Z </tbody> 1 D! l. A) c! _. R4 E% [
</table> |
|
发表于 2008-1-21 20:52
|