|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
7 R" l/ a9 s) d, t: y, g<SCRIPT language=javascript >% g3 @8 L7 o$ q6 e; R& J( W
document.write() a+ Q1 w3 q8 g3 v& M% n
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\! S. u5 n9 b. I" T
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");% M5 U0 o2 s" q- l, G! H
! x+ b8 @- a) ]. G9 [* N' @
function showtip(text) //显示链接的说明6 v8 c/ J: G* @% U3 G: L
{
6 r: n& j( s( M6 d( ^5 J# s* b% Z if (document.all&&document.readyState=="complete") //针对IE0 ~# n9 i7 r/ O
{, D5 O) {! @5 H1 B. b
5 e: N$ Y g' c# K: F
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
4 [/ I' Y( p0 H! C7 f5 c document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
7 u7 s! @; G: N1 B document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
3 z. {' e: U" f9 E) G" u% p document.all.tooltip.style.visibility="visible";
, ^3 J% ~" l* H& s) b, O% f4 d }
5 Q4 t/ @. N4 v; n3 _& U7 T}
* c6 H) ?# W) t! Y9 [; E4 u3 P+ U+ v3 t k8 x6 }% s
function hidetip() * X# |$ A& P+ ?) ^2 ^
{! M& J& x6 Y) z2 _
if (document.all)* a0 v. M: u4 O8 T/ p( s- _
document.all.tooltip.style.visibility="hidden";
/ v7 T6 N, x& H Y$ `% u}: O0 W ^7 p* }, b) D; L
, ^ s8 F0 t* y+ m" Cfunction setcolor(fntcolor,bgcolor)
# G4 ~0 `0 B4 s{
s: d' r" i! u n" q document.all.tooltip.style.bgcolor=bgcolor;
) P N0 n& G" z/ U2 n' I" j document.all.tooltip.innerHTML.Color = fntcolor;
1 z8 j* b& S) M& \+ C' D' f3 b}" \( W5 F3 f: y; m I7 T
4 D4 E# x! q- P
function showhint(text)
/ U9 q: q1 W$ {' B{
2 ^3 f% n. `4 C) _ onmousemove=showtip(text);
5 e" O, u- z. p- ~ onmouseover=showtip(text);
2 t6 }9 W1 W5 c4 ?) \' [ onmouseout=hidetip();
8 a9 H' r: E7 G4 s: g% R5 U}
8 P4 U1 R# h1 @# \( \1 O& z</SCRIPT>! r a& J5 J. L; i, r. g/ _
/ Q' [; J/ B4 z `7 \% w# @) H
5 x1 W$ b7 L/ q* v! t% z) V# r
% j4 h- o4 C1 y6 f- z
4 N% E0 R6 D7 F& ]
3 C5 B h0 Z5 ?* l/ {4 X8 P# E! R' a* Z" E, g! {8 n) v5 w, \$ y% y
二：将下面的代码复制到〈BODY〉区% @5 v# M0 C% S" }
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
% j6 _( p+ C6 Z) ?1 Y- S; |9 X# _. Wcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
# h# ?1 s; M" J: X <tbody> 2 X' q; m& L6 M* e
<tr align="center" bgcolor="#ffdfd0">
2 t9 c) ], e- {& { <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() 1 ^0 Q1 m, v7 X# Z" W, K+ V& ~' J
target=_blank>赏心悦目</a></td> I( S3 P; J }/ r& v
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" 8 o7 ~ ^. |" \
onMouseOut=hidetip()>网页素材</a></td>
4 ^: S2 G3 j1 Y' P, f4 i) A+ u <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() 2 ]; T' `9 {0 W9 h- [" A' i& ^
target=_blank>图像处理</a></td>, R q/ E8 E- e- w* g
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 2 }6 s: o% N' C
target=_blank>网页特效</a></td>- E+ q& H9 i% h8 Y# o
</tr> U1 s2 o7 n' u: E4 V. j
</tbody> ) g: E3 i$ v+ ~9 M% c/ y" @2 J
</table> |
|
发表于 2008-1-21 20:52
|