|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间" F5 C8 [2 E2 Z% o/ m7 t7 a
<SCRIPT language=javascript >, ~7 M' Y9 S6 q( [ T U7 P
document.write(
- B0 M5 F+ n& d! |! m0 y$ E7 V"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\1 i" Q# a1 m9 ]. Y% I
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");" A' H! F$ z9 P3 V
8 m, w8 X# i0 r' ffunction showtip(text) //显示链接的说明
, B- K5 A2 e. i{: b0 @/ e3 q) e6 f$ ~: ^
if (document.all&&document.readyState=="complete") //针对IE
) ~3 u5 F1 B" `3 o {2 R: i4 w) f8 Z9 j- B
3 Y& I/ [& O$ v5 ~ document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
8 V$ `+ }: z( `" |% R+ g/ J document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
' n3 c; O$ N, V2 `# K$ P2 s: V. d document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
) f+ S$ J e0 ^. a' @! B document.all.tooltip.style.visibility="visible";% w3 O) m# T2 [3 B
}1 Q j6 g3 ]& Z# I2 e
}9 X1 H$ \( w, L, Y/ W9 Z9 f* ]4 w
. b% s6 T- Z& lfunction hidetip()
$ l5 G! d0 Q7 K; e U- r; D- O{
- i5 ]6 ?6 s) R$ Wif (document.all)2 c( d N5 ?( m4 T4 S( d7 X
document.all.tooltip.style.visibility="hidden";' s' @( ~1 q/ q3 s/ s, D! R( I
}
+ Z7 p" f" l1 [- Q* Q4 t9 L/ D& C0 g9 b8 c. J( Y0 C
function setcolor(fntcolor,bgcolor)( K9 H/ B0 d7 a
{$ y! x& ~2 ?) Z, q" D* p
document.all.tooltip.style.bgcolor=bgcolor;
& q) _; M& ?" H7 ~3 r$ y! R$ H document.all.tooltip.innerHTML.Color = fntcolor;
% ] W- }$ o% b& S}+ ?4 W5 H$ s: X5 T7 D' E+ M! T8 x4 E
3 V9 G' ]5 s& c E; W# yfunction showhint(text)8 C& [/ q! l, {: B# H" I% O
{+ M2 L( K% Y7 \
onmousemove=showtip(text);
I# F: H$ f8 u* j onmouseover=showtip(text);& g' \& Q7 L3 h: q
onmouseout=hidetip();, d' h8 b0 Y8 [2 }( p( S$ A8 K' w- T# a
}$ h5 Z9 a* z1 ^
</SCRIPT>
; @! r8 Z: G- x- P
! m3 T- b/ _ D2 g0 Z8 u* Y$ o$ p" D9 m
) R, V5 R; Y& m, [) f1 R2 m" v9 A/ R, U) a# {' k
/ l. S; u: n/ k- p( R/ V. I. Z
) B! T& ]) b1 m, ~/ e0 e二：将下面的代码复制到〈BODY〉区 h% Q7 ^9 g" i( M) ]
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 8 v4 m# a4 y0 K) Y' n
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">1 Y9 T$ ~3 T2 g3 s! E) V ^
<tbody> 6 \4 v+ U8 z3 ~% E
<tr align="center" bgcolor="#ffdfd0"> ' R7 @" c v" w( `5 u
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() * ]- o7 h; \" h1 Q$ x
target=_blank>赏心悦目</a></td> b$ j& Z E$ E M
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" % u7 n9 ^- i" c( {. ?" u7 x
onMouseOut=hidetip()>网页素材</a></td>
' d/ A& h, c) A7 H+ I, V, e( o <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() + g+ W- A h, L( @
target=_blank>图像处理</a></td>( B' e& @ h2 f
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() . J- L& P% [ s
target=_blank>网页特效</a></td>
+ z4 B/ ?+ V; u7 e7 x6 d0 p9 L </tr>: x k# D$ _: o2 {% i: c/ d; i2 c
</tbody> & m1 x$ R. f; G4 F5 @: L' N
</table> |
|
发表于 2008-1-21 20:52
|