|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
: {6 D4 ~5 f/ U+ ]$ V, k$ ~<SCRIPT language=javascript >
; t% {6 {2 l: Z& ` e% v6 h$ vdocument.write(
+ }% c9 r% R& y, j% l"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
5 \0 M6 _& G& {! c% y/ N7 j;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
% h& F# |! [- N$ ]# t
+ N& Z+ F+ v% \' j" Wfunction showtip(text) //显示链接的说明6 G$ L; O* u5 y3 A
{
1 ~' h0 I- ^7 z9 v if (document.all&&document.readyState=="complete") //针对IE
, A) r5 x5 F; E7 w9 Y1 { {
: C8 i0 {( R2 N2 }% Z
$ p' V% {8 F& n' r& ^ document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
2 `5 `4 j8 J' h$ q: Z' m" r- @% h document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;& @1 b e- L6 O1 D/ k `: f$ R
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;" X# _, R6 K9 H1 A1 x2 S: E
document.all.tooltip.style.visibility="visible";
+ A7 e S$ R1 _6 D" z% `2 r! s# J }$ B: l0 f0 ?$ ?7 ~% \
}
" w3 r" x$ F, C" X) @ N$ @8 ?9 e# G- d; G6 f4 g" W/ [
function hidetip() . n0 Z! u4 Y4 g* }1 B# {3 o; K
{
. f: a: c) m4 x X; ]" f6 r$ dif (document.all)5 I& m/ k9 k2 x0 Q
document.all.tooltip.style.visibility="hidden";; x( c/ f! X9 m. Q" w! N6 B
}
5 v. t& k+ t/ T6 `2 \: r" b3 W2 B/ K% Z4 z* ~
function setcolor(fntcolor,bgcolor)( q/ B% A' x6 L0 z& n
{ n. ?2 T& u7 K# D, P
document.all.tooltip.style.bgcolor=bgcolor;" @; T( P/ |' R2 B8 V
document.all.tooltip.innerHTML.Color = fntcolor;
: |( L1 j7 N( B4 V}+ m+ |# o# i- J% o& x7 ] ]7 m7 ?
9 A i: w! x: c9 i/ O( n$ b! S
function showhint(text)# v- c% T1 w; M/ S6 I
{# d4 e3 D$ K2 J7 j
onmousemove=showtip(text);% {8 I/ B) a/ _3 E) \5 \6 l
onmouseover=showtip(text);! p( u% k" ?- Y. y+ E1 P
onmouseout=hidetip();
+ ]* O2 Z4 S' \}/ X8 @5 J- y7 \' j! e
</SCRIPT>6 S# W# }4 q4 \9 S0 ~7 @, j" C _
0 L+ a7 H% P* r d" k+ V( f
+ j! Y7 U5 Y3 Z+ |# x8 g9 @( S3 t1 n- Y7 Z
' f1 ]: Q& I) d; E4 V, f
3 X" X' ^# C p' u& `1 x* T! o2 @3 o3 m$ \4 W
二：将下面的代码复制到〈BODY〉区
! ?3 U4 ]$ S* G<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
{& s! v1 ^8 p! s H* `cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">; l- Z0 L) `4 ^6 T( ~, F0 B; G+ S
<tbody>
# s5 P! Z7 \. f& t3 A4 q; q0 L <tr align="center" bgcolor="#ffdfd0"> 8 Y$ ^0 a/ U3 A3 F8 z9 X
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() * }& q6 D" b3 j2 E. ]1 N
target=_blank>赏心悦目</a></td>8 f4 _- e+ s& p& x3 M8 {/ r$ J8 D! m
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
6 y9 G7 V0 ^! Q* ^+ z" U" H# w onMouseOut=hidetip()>网页素材</a></td>; r1 y! C; b5 B8 w W
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() 4 k- M( c0 s) V0 ^& E" B5 `
target=_blank>图像处理</a></td>, Z; f; @0 Y f( B: r2 \
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
2 f0 \6 Q+ u2 l1 l9 Z6 n3 R& A target=_blank>网页特效</a></td>* r1 _) Z* g5 ^9 {6 m s
</tr>1 C+ H( V) L% K. j- y
</tbody> / G* ^, s- u, o1 Z1 ~
</table> |
|
发表于 2008-1-21 20:52
|