|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
4 q) A, F3 K0 |2 N3 T: e+ K<SCRIPT language=javascript >7 r% W( ^" A$ z1 R0 c" {6 V0 G
document.write(4 [ d/ D5 C3 d
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
5 ~! O! w% p! j, m$ I;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");/ j1 B7 p( g& M6 ~. A+ j; \
6 Y* r! f* I8 @! tfunction showtip(text) //显示链接的说明: d. k+ D" m% ^+ y% R
{+ Y9 H/ H# }* e; |9 \ w
if (document.all&&document.readyState=="complete") //针对IE) h3 n/ L) G- c' p0 n& w% X
{6 ~' k% D2 {$ y0 }' @: I
; [" _' N- r" k2 |- m% F. z document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";1 X8 }% |& X3 m7 p7 b
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;( Z& N5 B @( G; y7 b
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;2 N" [. h" I5 B+ x! H
document.all.tooltip.style.visibility="visible";
0 {# E3 y& P( E7 ~2 z7 ` }3 N9 }8 {! T+ e. S1 B5 E' V
}
/ [$ i' G( t) g, T
$ P; r- Y5 N' v& A; ~function hidetip()
/ w+ F. N1 T0 L/ e{
" R: a5 m9 N" Uif (document.all)
& P/ q% m$ |8 G, T1 u) |" i document.all.tooltip.style.visibility="hidden";
* [, q5 S( K5 O9 d5 q}
5 B8 k# j. `4 e) l3 i" e8 i1 u6 a6 Z B2 k& E5 O4 U+ U- _8 _8 o
function setcolor(fntcolor,bgcolor)
9 D1 `. o) [; f4 A9 E{& R% J$ _* V6 ]) `8 Z% e4 A
document.all.tooltip.style.bgcolor=bgcolor;
* v( `% p. c m3 m document.all.tooltip.innerHTML.Color = fntcolor;
9 I l1 k. O& j3 A$ ]# ?}1 W0 [' G4 O! ~" Z7 C2 a6 ?
/ ^) {9 h8 S; o& \/ G5 _5 w% K# ~function showhint(text)* j8 u- u, H8 N% l; Z
{; A" X& ?& j0 D, {8 U4 }& z( X% {2 ?
onmousemove=showtip(text);
2 l! h5 c5 l- M( B! F" U5 J onmouseover=showtip(text);
6 W, ?2 m' {# l) V' Q! I2 e onmouseout=hidetip();: y8 L$ A3 ~4 y- ~/ t6 D+ ^+ a
}
' N6 x: i4 ^; M- k</SCRIPT>
# i# ]8 V# V0 s3 f7 {5 y- N/ N! K# n! k0 m1 Y3 W
* c( m) o& ?) p9 W" j+ o- I( |
9 `( H- z! E/ S' P/ l! r0 I! z) @$ H6 {
$ P8 D/ S+ R( b- B" ?2 r% f B* \0 Q; |, R/ s6 j* A5 N# _. F7 _
二：将下面的代码复制到〈BODY〉区
# |) r/ {" J9 J- e7 O$ E% O<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
' g3 y1 R% D' x0 a9 tcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
, y4 m1 r- p/ i: ~0 K9 \6 S <tbody>
: C+ O2 [9 H* p <tr align="center" bgcolor="#ffdfd0"> , E2 w) k* J( m
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
R- s/ k2 B; @$ }9 v& ], E target=_blank>赏心悦目</a></td>2 G# h% o6 H0 q& s4 E1 [
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
8 ~" e6 S9 ]9 P; ] onMouseOut=hidetip()>网页素材</a></td>
g0 L0 c2 }6 r5 t& A. r <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() & \. P4 z' o: S7 s4 a* B: ?* `' g
target=_blank>图像处理</a></td>
6 U! a# E# T+ B0 | <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() # }7 }5 D x2 a* C+ K2 y
target=_blank>网页特效</a></td>
, {! w/ k9 p; I: g0 S3 b! A </tr>' a: V ]; _9 m* c' v8 E/ a' p- e
</tbody>
# M9 h# G, H% ^; U% M! S- p </table> |
|
发表于 2008-1-21 20:52
|