|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
9 X6 q2 m2 L, R( t8 Z1 v' m! [<SCRIPT language=javascript >: X2 P) x3 j% n7 n0 D
document.write(
" B: b" H2 K, T4 f" C"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
! P$ {5 n3 A! O2 k* B) n;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
8 |1 V( M- D [0 Y5 E
! b2 `7 y, ]9 _3 Ifunction showtip(text) //显示链接的说明$ k& H8 c0 ?' W: q, j
{
/ B2 V& ~1 B d# L5 W+ I if (document.all&&document.readyState=="complete") //针对IE
/ |/ N, D+ v) J: L9 F0 B8 q5 k E {" Y: E+ z" L2 `7 P3 M9 T
* v- o8 i' Z7 y* i( s! o% L" D
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
- l( C/ }( T l& p: D3 \( o1 } document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
, D* v$ m" `4 Y1 u" r4 G document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;. D3 F# {: f8 {' I
document.all.tooltip.style.visibility="visible";3 Z ^" L: q7 A# a* l/ I
}1 B* b3 \8 J! K$ Y1 G
}
' Z6 i2 w2 Z9 {# Z6 x' h& t& J, |) o
( h$ w+ H/ ^# u9 Sfunction hidetip() ( \$ O5 T) i& Y/ U
{
3 ~" C, j* l. y8 T: Yif (document.all)
9 l1 o' l3 n2 t) H document.all.tooltip.style.visibility="hidden";
}; P+ R: [3 J% z5 \}
3 C: }0 q7 S: | i- y- }& f. |/ n7 x$ z" _
function setcolor(fntcolor,bgcolor)( V; I/ z+ f5 `0 F' u$ {$ A/ s
{) M% W* S9 w! X' L6 ?. I. H3 p' Q6 v
document.all.tooltip.style.bgcolor=bgcolor;
% P/ P) S$ b5 \0 V' z document.all.tooltip.innerHTML.Color = fntcolor;
/ z# Y- N8 H7 A}
0 F$ ?. ?+ }$ t. H' \7 v% ]- @/ k; u, D% `% o" f F9 t
function showhint(text)
$ u! a8 Z: }$ T5 N" w{) {8 T7 B, P! ]+ Y- H K9 ^5 i$ `
onmousemove=showtip(text);
0 [0 u1 M# r" | onmouseover=showtip(text);; S0 {& ?' ?( H W
onmouseout=hidetip();
9 m! V- O# u0 y# C) m7 H$ O; f}! b% u! ^) U# h2 {% m( _) e
</SCRIPT>
+ Q9 w' b% G. ]& _+ G5 ?; z4 h6 V) r4 b6 J1 M8 e2 g
' @+ H( a3 a. }6 _6 @8 J2 _9 w4 T7 r6 T7 ]6 S; A9 ~# N! q. t
+ w- F% _7 _4 B9 W% f* {. {- r8 K: _. U
1 z" L$ R" P, N. W& d
二：将下面的代码复制到〈BODY〉区1 w6 |3 P! H7 T
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
: I/ @& q" v4 f' E0 q" E2 fcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
# D+ c4 Y' h& T1 H/ a7 e s <tbody> / x# o: U$ h/ B1 F, u9 o/ F
<tr align="center" bgcolor="#ffdfd0">
7 g% Z* }8 I3 J) `/ \ <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
8 N4 }: ~$ x- h, p7 I- W+ { target=_blank>赏心悦目</a></td>
: W5 }0 F* I' K) V# n <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
1 |2 `, |: o/ e3 ?5 n onMouseOut=hidetip()>网页素材</a></td>; P. a# q) ^5 v1 d& W6 I$ [
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() ( w7 c8 l r. o
target=_blank>图像处理</a></td>+ A% v5 V4 b! @ Q& Y3 a' D, s$ k( Z
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 5 V2 ^5 e/ Z! Z9 {
target=_blank>网页特效</a></td>
- O* i5 U, _: f! B+ g </tr>0 ]& B; F3 H, ]9 [1 s1 [8 F
</tbody> + ~/ }- G. C' `9 U1 h; F
</table> |
|
发表于 2008-1-21 20:52
|