|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
9 E" d3 K g2 ^; X7 ]<SCRIPT language=javascript >4 i: X) K9 \ q) I' q2 i- I
document.write(
3 ~) H3 v5 ?$ m* Y"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
- p! |- r- r9 g/ b;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");- b ^$ i! [0 ^! F+ j9 G
3 q# D. T/ [( z) N& m7 Lfunction showtip(text) //显示链接的说明
, Z1 A e3 T1 @* b! A9 C{5 i4 ]& H; U3 a2 u' ?* A% {2 M
if (document.all&&document.readyState=="complete") //针对IE
7 U" u9 V2 V- h {# A- B3 ^7 l ~: b) E6 T
& ]4 d. W8 e+ t" f! @* `/ u document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
. u. Y: f- E4 q6 a+ u2 y7 o$ n document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;5 K1 ]8 I% v8 o
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
1 M/ }& c. ^# r, G% _' [ document.all.tooltip.style.visibility="visible";
- t% G* i" t* ]. w' R. r' s% ~ }
% W: O" `# R0 i/ S7 G}
# A) z. }3 |5 F+ X4 j5 B# {9 l$ @+ O4 f' u9 D8 V
function hidetip()
8 g" `! N: D& q' B, }& ] s$ x2 E8 J: h# z{
4 x E4 s7 v+ {! T( Iif (document.all)
2 A' J, T+ ~8 ]+ o8 N4 n document.all.tooltip.style.visibility="hidden";
9 D/ A, ~/ r1 p7 ]9 B}
; h7 X9 G, ^& N1 @ C
+ p% v! Q) b3 H& b0 c9 ffunction setcolor(fntcolor,bgcolor)
5 M" n1 c9 z6 W1 a{
1 ?3 ~, ?0 y$ \% s' I8 X ] document.all.tooltip.style.bgcolor=bgcolor;! U& h2 }, O U1 d0 q: n- Z% h+ `
document.all.tooltip.innerHTML.Color = fntcolor;5 _$ X& }( G% {' j k1 [! l, P
}) C2 q0 z4 x9 M, Z. h& {+ E
5 E+ q5 ?$ d8 G& s
function showhint(text) N$ p" o: c( a+ n6 N; c- j6 L
{
" z& F# e4 X2 \" O3 I onmousemove=showtip(text);$ n* x- f$ j% a0 U
onmouseover=showtip(text);8 S# f9 C/ \! ^5 g
onmouseout=hidetip();
7 P% @+ m' ?8 m. `# m}3 n- {* {; E6 _3 O& q# s
</SCRIPT>
+ R' l& Y% K& B7 h
( [+ `* E" l5 t& I; }) ]5 J; B) H) G8 i: g! U& F6 z2 F6 c
$ c6 E9 i& q+ e* P# B' [
& U3 B& w! Z. r# } }3 ^8 B, T) n$ X& C/ H
& Z5 Y% k& f0 M/ p' {# l$ d" k+ U! n, m8 P: j; @8 u
二：将下面的代码复制到〈BODY〉区
- T) b; D2 x4 b<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
) w5 ]1 C5 D; y) s! A. V# }# tcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
( ?% Y) G' d, J0 b$ u4 K <tbody>
' |2 K* r6 _. }) B* N, j <tr align="center" bgcolor="#ffdfd0"> 0 p1 Q' B8 H3 v8 D9 {; c# V4 Z$ t
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
$ _3 m7 ^# u3 @1 O" M4 k+ q- C" W target=_blank>赏心悦目</a></td>
- a7 H( `5 \! ]: { <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
, \6 }; M9 I/ K& [ onMouseOut=hidetip()>网页素材</a></td>8 X8 @, G2 N9 I' i6 z/ w! v
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
0 s. E- A& M9 H1 c$ f V target=_blank>图像处理</a></td>
& R: }& E4 t7 ]; l0 W* R! T <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() , C: l6 r. C& V3 r6 u
target=_blank>网页特效</a></td>
0 n" v* h" C! O0 @. i </tr>
1 ~ v5 Z* \& B e# _+ T </tbody> 1 A% |! S8 [$ N0 {, L! v4 Z! F
</table> |
|
发表于 2008-1-21 20:52
|