|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
; J" K: f% ~1 }1 o& w<SCRIPT language=javascript >
* a) R! q# E: `# b" b; |" f% ?6 Udocument.write(* h' Z! R4 {+ g1 f6 G
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\3 h7 o' B( G5 I; k2 \* i
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");6 q7 s7 Q G3 K7 F6 t; P
* P, n% P4 N* j) I
function showtip(text) //显示链接的说明
: v. G9 M6 O Q! L8 p{
+ d$ o/ y8 w% Y8 N! a5 D3 F if (document.all&&document.readyState=="complete") //针对IE
0 l- ~6 [# f5 {% Y {% E6 @: q% `# P$ [- D D7 \( v
2 j& g+ m, Y3 ^4 _+ `: _4 m document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
9 h; q% M1 x$ p6 H8 t6 h document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
4 S: a) D: J3 }/ Z& ^ document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
- y# I: m8 S$ b7 q$ S8 Y$ I document.all.tooltip.style.visibility="visible";
% G+ c1 V4 p2 J9 l5 G }: P0 X o% ?) b) K2 Y2 J0 H2 {
}7 v9 ~. M7 Q$ ?4 ?" _
) E7 h4 Z, i# p& m4 j7 o% p2 nfunction hidetip()
T0 S( [3 `. S1 V{- U6 n& F2 { I: J0 Y
if (document.all)
: C) B. G/ u/ B2 `1 q4 y4 S9 Z/ I document.all.tooltip.style.visibility="hidden";
8 {+ ^2 a9 y+ f# p g' y( U" A}+ ~ @1 [" Q/ T- @/ \; @" T
9 R+ s3 P5 X! s9 w% S& t, }% C
function setcolor(fntcolor,bgcolor)
; ]# z' t* j7 D, q- y5 o0 f{* D) H" B. U; V- l+ Q; X/ ^
document.all.tooltip.style.bgcolor=bgcolor;
, T2 b o8 k2 e document.all.tooltip.innerHTML.Color = fntcolor;7 H t+ e3 H6 Q4 i, R" C, c$ J" y
}
9 m( d5 Y& B: ], P- o( s7 `
8 ^, ~) D# X7 U. f4 z Vfunction showhint(text)
) {0 e7 c4 l1 u6 u) v& Z{% D6 E/ U9 L x1 O
onmousemove=showtip(text);
. c; {* b4 A& @4 D# z! |. a onmouseover=showtip(text);6 i1 J+ q3 O( M4 T" c
onmouseout=hidetip();
* t0 l* e) x. L2 k}
0 n1 b: S. b, b" E$ Z</SCRIPT>
5 d7 d8 F! v. {; Q' N' V* h+ C( x4 G4 z+ Y# v* v7 ~5 }7 p2 _
1 r- U6 A( M3 `0 P7 O/ h/ E, g
" r, A" D8 e1 f' @, X) a$ N7 _2 b, |$ J' p5 j/ F: G+ k4 p
/ B, j% w' H' J5 }+ k" d0 @" e
: f7 S$ X2 P& s3 ]二：将下面的代码复制到〈BODY〉区! Q) T; u4 H4 B$ `2 ]3 B
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 3 Z9 Z# f: ?/ D6 w' Q) F% L! i
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
; Z" m, N: S6 m" h2 w+ f <tbody>
; Q8 x/ X* R0 h9 ~: r8 t: S <tr align="center" bgcolor="#ffdfd0"> - d% v% ]5 W: M5 \
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
4 E2 T( h" k) `. ^ target=_blank>赏心悦目</a></td>8 f" R. l7 T0 k! I( C. r9 ^
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
# `" n2 I- D l8 H, Z/ g onMouseOut=hidetip()>网页素材</a></td>! t8 |# B+ j% W9 H; G
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() % |# r. B# g; }
target=_blank>图像处理</a></td>
% ]! W8 f2 l$ } <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
6 {% L* }2 {1 s6 X6 g: m: @! ~$ z target=_blank>网页特效</a></td>
. ?' r, y" E: A2 V$ S. {& |6 j </tr>
7 N& Q- V' o5 g ?- L </tbody> / Q- ~) e a, }- y+ Z) @+ I
</table> |
|
发表于 2008-1-21 20:52
|