|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间2 i: U' f3 E8 w' c
<SCRIPT language=javascript >
0 ^& o/ t, ?0 P! n- m* Bdocument.write(
) K' [8 ]! C" F, N! f"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\4 c; W5 d9 G7 V7 e0 p" ^/ k) C
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
5 m' }3 P! }" d
) s& m- x, Z+ e8 k; C' e8 Gfunction showtip(text) //显示链接的说明
0 B& U6 D: q; M. u0 W6 r+ \8 Z# W{
* H& M+ U2 b, ~$ n, { if (document.all&&document.readyState=="complete") //针对IE
; P' d+ S. {2 I9 R# p {' `& S9 T$ ^6 O+ y. `9 M& @% x) U
, Y# T9 o" T9 `# B' T4 Q6 i+ f" F document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";$ L6 s% \, q6 g$ D. d) c
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
9 S( q) w8 S7 L% L$ L3 } document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;/ E& \% s' r6 K* \
document.all.tooltip.style.visibility="visible";
5 s8 H, H; ?4 S/ p9 s5 s& ] }6 Z: h4 d1 U# N; `5 Y
}$ |7 ^6 w' G) Z3 O. Z8 H4 n
/ K- }9 P, o! l/ `0 ~* J
function hidetip()
3 w1 `* k7 u4 Y{
6 B+ \+ B# Z* Tif (document.all)7 @/ l( Y" t$ J0 x& J( q/ \# V. Z" o$ j
document.all.tooltip.style.visibility="hidden"; N1 b' c% b) W* [/ d
}
' h5 ^ j; a* k( S* O2 q
# y$ h# h+ w/ ^5 @; w/ Sfunction setcolor(fntcolor,bgcolor)
1 X8 U8 Z8 ^$ I3 l6 ^{% E* V' m G' ?/ I$ s' h: S
document.all.tooltip.style.bgcolor=bgcolor;/ T. O5 y; B- Q1 H! B
document.all.tooltip.innerHTML.Color = fntcolor;& h- n4 s6 v5 i4 }3 k4 Y; l
}' c% v. p- V; ~) `
+ P% t( j, u B
function showhint(text) z" |/ e0 s. k' P3 k3 i7 u% [) z
{
1 o! k3 O: Z4 p5 @6 k onmousemove=showtip(text);
, L6 Y5 _5 R; I* ~1 T6 ] onmouseover=showtip(text);5 m- r* t& z- Z. q( E
onmouseout=hidetip();2 ^ s- E7 O! V" ^% P H/ y
}
( d) o0 R/ Z, D7 m* {- l9 i</SCRIPT>
. y+ i( G$ Y- H6 f5 c: g: f$ U8 f4 X6 }" j; X6 {
+ f4 P+ v) U$ d) ~/ r' B! C! B
2 K3 U" D/ z( Y" \, `
6 v X3 c, ^! j. \/ J
7 h5 K+ f( b" F2 `2 O2 m* ^7 U( Z" m
. r" J+ |9 f/ b1 D* ?二：将下面的代码复制到〈BODY〉区# Y+ J0 ^" k6 x- s5 x, X+ J/ c. Z# s
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
" E& x* T) J& ~+ {: b" D6 ?cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">. R; j/ y" h2 u- W. {' [
<tbody> ! D" ^% u. D$ z6 J9 b3 u
<tr align="center" bgcolor="#ffdfd0">
3 f N7 k$ ]2 L! y+ B& W# D <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() 3 ~' ^3 N/ i- v" y5 C
target=_blank>赏心悦目</a></td>9 p9 \& K; j* b
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
9 `. n$ h( o: o7 U onMouseOut=hidetip()>网页素材</a></td>5 x" J! D) n0 R8 T, J3 x
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
2 Z- L. j, S7 W8 }4 N' @ target=_blank>图像处理</a></td>
) i: D2 x0 t. ` <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() " F2 I" _! S; ~, I$ Y3 r2 L: h
target=_blank>网页特效</a></td>
+ ^) h2 k: }2 r6 E* \ </tr>
, V, A- G5 Y) r L; g3 W </tbody> 1 B2 Z P$ W9 A+ X
</table> |
|
发表于 2008-1-21 20:52
|