|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间6 I. N8 z; x2 Q/ n4 }
<SCRIPT language=javascript > G# h- S6 P8 O1 A5 p
document.write(
1 p; ^3 Q r: k3 @. Z4 r) B"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\/ W3 {+ R7 e: a2 _/ B% O/ S {
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
7 O% c, h0 O6 k
/ v) s3 D/ N3 o% mfunction showtip(text) //显示链接的说明; J0 ]1 `, H, {
{' q5 M, d7 {6 U- }6 V# }
if (document.all&&document.readyState=="complete") //针对IE
/ L& ^* c6 k C$ o+ w# Y% H7 _ {
) C+ b- C9 C5 D$ b 5 `/ | F# K0 h- N
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
6 V+ n5 h0 D, D, R: d document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;5 r4 w% n, v: w0 u2 T* Q
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
: R7 P/ j' y3 K document.all.tooltip.style.visibility="visible";
7 q" u9 D/ J0 ]$ R' n, X }
7 v9 w* U# C% }2 D}
# }$ q C7 r) |. {0 n8 Z
6 u0 S9 Q8 Q# e4 Y+ h3 a" m! Ofunction hidetip()
# R% d7 e$ J. }! H" X/ L5 w{
% x; B" v4 k8 U& W8 K: Cif (document.all)
9 m& l! Y4 S; Q0 B9 v3 ^& l2 e document.all.tooltip.style.visibility="hidden";! s, B# w/ w1 i/ B9 K
}+ b, ~) S8 h) p
1 P( a9 ~* r8 d
function setcolor(fntcolor,bgcolor)6 J* n6 b) a. Q! j- v
{) m! q9 w' K, U0 _" p7 r( j
document.all.tooltip.style.bgcolor=bgcolor;; W6 E9 A5 ` ^
document.all.tooltip.innerHTML.Color = fntcolor;9 F g3 U* [1 l) g
}. c/ }5 `0 \7 T/ X1 U- K
5 d" L9 {# Q6 X, D9 u
function showhint(text)
8 D) l0 V/ X) J* u" ~" d. t7 X4 o% _{
- {0 @% l G4 w) i onmousemove=showtip(text);/ X& _- j; F5 f' A: p5 P% m
onmouseover=showtip(text);" g/ P1 l# Y9 o) S0 [" U9 @
onmouseout=hidetip();' b# [* h4 l% M) h
}* i q* M( a7 h$ q- r+ Q- I; F
</SCRIPT>+ s/ i2 }0 m7 h2 Y4 }6 ^
! A2 i' N% X( h. p
5 {4 t$ B5 I: T9 @4 j$ A: Z- S5 U8 i$ i8 `
& V- b; }- @: g3 Z
8 {- v ~! y6 s _/ M
0 b7 a# D$ [' a; {( z. x
二：将下面的代码复制到〈BODY〉区
) I4 U/ h, P9 c l<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 ) Q& _& D5 z* ~9 `0 u
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
7 V& n) ^' o$ ^2 t( e+ Y% w, @5 M <tbody>
" b1 \* A+ B; d! ?; {" y; [ <tr align="center" bgcolor="#ffdfd0">
3 H6 `0 ^' ~) N2 J1 `2 s <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
* l$ L; z/ f/ L4 g9 }4 w2 h8 Y target=_blank>赏心悦目</a></td> B6 E( `7 z2 ~ n* ^8 I3 P
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
7 z9 q" {) z" P3 }. A" |2 s onMouseOut=hidetip()>网页素材</a></td>
4 l* b: g5 B- R' r! h <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() ! ^/ u- T, ]1 q8 X
target=_blank>图像处理</a></td>
3 w9 [1 e; Z0 e) H <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 7 U) ~1 W5 Q: Y) h9 M F: v x
target=_blank>网页特效</a></td>
/ X3 g# i) N) H" U </tr>
# D9 ?$ x) C7 N9 f4 w. }3 `3 g1 O) k </tbody> # U. R9 L% ?" E; q3 t. Q
</table> |
|
发表于 2008-1-21 20:52
|