|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
( u, @9 N" q+ {; W" O5 C<SCRIPT language=javascript >
7 W# A: W. {; odocument.write(
+ e ]5 d# X/ |: ~9 l8 ~$ e! H"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\- j7 b. C' x! t6 z; J ~/ ~* f
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
0 x/ L s8 Z9 i) J' u7 l' S1 r: L5 N* W) a# x
function showtip(text) //显示链接的说明( d9 l8 W$ S' T% u* H1 n
{# y) Q# `, S: |: R* w
if (document.all&&document.readyState=="complete") //针对IE
4 B5 |/ n8 g& y8 _ {9 T4 Q( P3 n/ ^8 g1 |4 P
# r/ o2 W4 A( |, h5 Q
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";& S5 }, o! U0 @: u; B9 I
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
; w w: y5 T6 l5 A5 E; P document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;+ j: C8 V8 J. \* i& T. ` E
document.all.tooltip.style.visibility="visible";5 A9 E8 o1 i% X
}
+ K0 I1 g" _ g" U" t# R}- y8 k$ @1 T% y0 a
: C% F. i3 e- V; D5 q* rfunction hidetip()
" @/ p. M( x+ p- i2 Y9 N* w3 ^{
6 Z8 x( ]4 O* J: E& \- uif (document.all) O" e+ `- z0 E6 p7 \+ a( u
document.all.tooltip.style.visibility="hidden";1 I/ H7 o+ w2 p' j' R( k
}3 j' V+ d+ X7 `2 ^' r. A( X2 Y
4 R1 _. x# s: ?# pfunction setcolor(fntcolor,bgcolor)
$ e1 q+ q2 R4 ~8 z) Z n{
T# T+ u2 |0 S9 {/ V4 V* k; j' e& ^ document.all.tooltip.style.bgcolor=bgcolor;9 g) z5 q% N7 U7 R& W' x$ R" V
document.all.tooltip.innerHTML.Color = fntcolor;6 K" H. @! _3 G3 q
}
1 l4 ]1 c- M6 H5 a6 F
$ N5 f& W3 y. g4 h2 V/ j. |function showhint(text)- z* ]9 |9 e1 b _7 K) O1 H, o
{$ ~# X1 n$ ~4 X1 Y: e- G
onmousemove=showtip(text);
6 Y/ b# Y4 I" M4 I0 | onmouseover=showtip(text);( K* |& |0 Z* s+ p
onmouseout=hidetip();7 u. Z6 Q+ h9 P. E& N, u7 m' p2 D
}
" ^! y6 |6 x# q0 x# L</SCRIPT>
/ [1 Z9 z' [5 q, g w
2 D* f; D0 P* S) ]) w3 s1 ?) Z, g) k- x& k' v- p1 _9 U2 F0 u
. H* H4 i2 K$ j5 {- e! X# `5 L/ y1 N8 W) j0 L% H
a4 s1 o. W2 E2 @& y/ v- S# K+ D
& Q4 W1 d X4 C& D* ?/ P" @, A二：将下面的代码复制到〈BODY〉区
* @$ l0 b3 U+ v/ t! M$ {2 H) `2 d: _# n<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
o. K* K5 ]- S, I lcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
! m% {+ q, O, ^' a$ w <tbody>
! v5 B( y8 i! m) p# H j <tr align="center" bgcolor="#ffdfd0"> ; P! Y6 F0 a/ c3 V1 h
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() 0 p* q) Q8 O1 |
target=_blank>赏心悦目</a></td>
) ^0 j; z5 ]* E! P <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" 2 u: V0 @3 N: Q6 d6 w5 V
onMouseOut=hidetip()>网页素材</a></td>% {9 O7 ]! j& r* P# ]" Z& r B' h1 }
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
5 W& m. ]! I- f1 a- x! L target=_blank>图像处理</a></td>
% V* g- D9 {( U: w5 Z# f2 x6 q3 r/ u <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() $ A2 R$ n. D8 m
target=_blank>网页特效</a></td>0 W) y- D$ v' ^) i# J: O( t
</tr>
7 ~. h) v- ?6 D: e) b8 h </tbody> 1 Q/ @0 i9 h8 a- r1 v- p
</table> |
|
发表于 2008-1-21 20:52
|