|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
- J3 J! Z& o5 [" l7 u- V4 i<SCRIPT language=javascript >
9 y' F& K t2 y3 jdocument.write(+ l" ?3 E( s4 `* `" h
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\- W) X, ~5 P9 y8 ?1 J: D
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
# o$ k5 \; O5 V8 M0 }: \7 D3 Y& l S# N# M
function showtip(text) //显示链接的说明
: Z& N- h! v8 V7 D" i# Z{! u7 t7 K7 y# q. {$ }
if (document.all&&document.readyState=="complete") //针对IE6 G, Z6 Z* v# r
{
% ]( {! R" \* l9 m; V7 ^8 u
/ Y: J0 r. D' G3 l" t. H9 H document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";% Z5 ~9 d- O; \* i Y. A# @
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;( u9 s) |! o B2 d# M+ B0 M
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
6 h" o8 Y/ D* p/ B+ g& B document.all.tooltip.style.visibility="visible";
; ^( j# |% D: Z, t6 T; g& H& t$ k* ^ }1 W1 s# F5 f0 x" m
}
8 F% c+ o- X: y( ?) m# m
0 o" m7 _$ N, s1 {/ ifunction hidetip()
0 C/ E0 P* J' p1 \7 Z& x{
4 a) a& U/ ~& R' x2 R5 cif (document.all)# s& C( ?: q4 f2 o: n
document.all.tooltip.style.visibility="hidden";
! @: h! q1 e2 {- \- N, y}% b1 u! {+ G, O/ h# c
" _6 Q9 ?0 P0 v. |) m' y$ d* f
function setcolor(fntcolor,bgcolor)
' A& u$ w$ V4 y{
3 t! }2 i3 E8 l4 Q' V. z document.all.tooltip.style.bgcolor=bgcolor;; n8 F7 l; _6 q. Q: Y' T
document.all.tooltip.innerHTML.Color = fntcolor;8 Y; J1 B) }% u' `8 K* s
}
' s' u% W9 Z/ E Z! D
; c9 h! ^+ ?) ]0 J2 nfunction showhint(text)
8 |0 E$ A$ a% ^2 v) A$ [5 q. ?{
% S/ @# z, r: i5 ]! m) X: ^ onmousemove=showtip(text);
4 P3 t# o a8 m* W9 Y) O9 }3 Q# F onmouseover=showtip(text);9 c8 g0 s0 L" a8 Q6 N" F4 ^+ c
onmouseout=hidetip();" b0 R% G; L0 W* V5 L" G; Q
}
/ [4 h6 Z" { W3 F</SCRIPT>: b4 o" d9 n! e! F
4 W9 A3 _, V% I3 U- j' N8 t
! X9 v7 Y& m7 B" ^9 w$ ^/ L6 s! |8 ^6 O* g8 x. G! `" w; p
, R" c2 x0 T5 j
A. N% s! L) F
6 N. A W6 Q: C二：将下面的代码复制到〈BODY〉区% X! h/ n3 N* T& \/ |3 O. J
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
7 C: C6 [; X: Q+ x$ g D wcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
. y) p: m+ @7 n4 v- w <tbody> / @ O# M1 _' A; p+ F+ {6 P
<tr align="center" bgcolor="#ffdfd0"> ! N( O. l5 n" m, f
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
/ b0 ^. Z0 o) t, f+ D1 H target=_blank>赏心悦目</a></td>
3 j0 ?+ q/ K% \- e8 w, f# I <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
4 ~5 r+ [1 n/ q$ {1 v8 Y onMouseOut=hidetip()>网页素材</a></td>. C: m) E0 b" T
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() / X! y, F& n5 w% b0 h: q/ r/ @1 ^
target=_blank>图像处理</a></td>
7 M# Q# D1 w# o" c. V <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
8 W7 E8 p' B, R# O target=_blank>网页特效</a></td>
% P. V2 t+ g. y" s& p U </tr>0 ]) q$ V6 J: R' W. N2 B; n
</tbody> " T' D7 u( c4 D" u7 W; `' q6 Z
</table> |
|
发表于 2008-1-21 20:52
|