|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
- a0 @+ U$ O' E- w<SCRIPT language=javascript >; e) R! c" y9 v, g! h1 k
document.write(
" `% U/ y/ g8 j"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\( ~4 _" C) a( E+ s( p9 O) L
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");3 c! b+ K; y8 g1 q: D, ^ E
2 ?; a+ w" ]/ l- J8 N2 Vfunction showtip(text) //显示链接的说明
2 {$ Y$ N7 z' n# ?- z1 K9 C{: R- a5 K3 Q: o
if (document.all&&document.readyState=="complete") //针对IE
5 u, n' j+ i L, S7 `5 T+ x4 o {
3 F/ O$ `$ B( p& I * _9 C$ o* t7 p
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
% G/ d! k9 |" e7 l0 @8 Q document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;/ l$ {# K7 A m; k
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
/ a; J1 i6 f7 J! A0 T document.all.tooltip.style.visibility="visible";
9 p3 f! |- Q2 e/ ?" c }6 I: }( R9 j% ?; X$ g
}' ?- W e% m7 e9 U# A* D" ?. C
) g+ ~% }: a4 s; v4 d9 |# v- l: Gfunction hidetip()
7 D* t" T5 a1 d2 h2 T{
6 ]' P' f1 j* O; [& k# Fif (document.all)9 K7 o, }$ t% U1 K( G& x
document.all.tooltip.style.visibility="hidden";
2 h) [- b- p! S" N3 R}+ D( v( R% h9 q4 b2 J
, w# N8 D7 l7 n0 L" rfunction setcolor(fntcolor,bgcolor). v0 K) }" J) H1 R/ j" Q! V
{
, {) X% `* z/ x2 v( w2 D5 |# G. u S document.all.tooltip.style.bgcolor=bgcolor;
8 s6 a" f# X) Q6 @ document.all.tooltip.innerHTML.Color = fntcolor;5 }3 X, m' y+ s% t$ _
}
# F, H$ |1 S6 o3 Q
0 Y9 x6 B6 S) w9 K8 r. mfunction showhint(text)( _* o$ a8 y" ]9 e6 |, O
{
4 K) d, h1 g' K( x onmousemove=showtip(text);
! ~1 s n9 B* z x onmouseover=showtip(text);
: L* _7 V7 u* e2 o- k onmouseout=hidetip();
5 e2 S: E, m/ d9 s$ X2 S! W- O0 k}9 e% F/ y7 h- J0 K, ?) y5 @# a* A) w5 m
</SCRIPT>
$ P5 e7 s* ?/ K2 q1 i" D- v: d1 v e! t
! ~0 `8 {6 y5 k. {# [. N- K% u; i
; x8 e/ \% r& P4 V; g: m' a( P- w) x* E
/ D' M/ \0 X8 \! H2 x0 x8 I7 L. l( Y. `. r9 I
二：将下面的代码复制到〈BODY〉区
- D( ]" X' P) c" D$ n8 h<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
. W V" I( f9 M' G7 F4 J2 Xcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
8 x4 F, k7 m8 Y6 r <tbody>
4 V" h) b/ Y7 m" b- z, W <tr align="center" bgcolor="#ffdfd0"> 9 `, K4 T& w9 c$ M
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
* ]" \" |# C6 X target=_blank>赏心悦目</a></td>
: a9 y) n% O" a. `" z& H0 U2 b <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
' G$ K; O, N: s _ onMouseOut=hidetip()>网页素材</a></td>& [& ~5 ?# x3 L" Y% g f
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
4 F" C& B# K6 G* T9 W, G7 R target=_blank>图像处理</a></td>' [; [% l5 s+ v0 \5 i2 [! h6 g
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() % J9 L, Z/ p- p \ k) g
target=_blank>网页特效</a></td>
- e( N) i' G3 `; R& y$ J </tr>8 m: p. \, L7 {4 T
</tbody> : B5 j( ]: }4 { a6 ` L
</table> |
|
发表于 2008-1-21 20:52
|