|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间0 B) H7 a1 [5 C- L8 ^
<SCRIPT language=javascript >, B' f# Y; H8 K1 ?4 w: a2 z
document.write(( f, ^) H" ?' m& W. _
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
( \2 K/ K, n- H2 Y7 @7 V;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
7 I+ [8 K! n) k2 D; U& D& ~" x
( u, y o1 A) h8 a7 X9 Qfunction showtip(text) //显示链接的说明! T2 Y; Z$ ?& m; K7 L
{9 B; {, ]+ j: m
if (document.all&&document.readyState=="complete") //针对IE( w: L/ U) o; C0 R! c, j7 Y
{0 `* w5 o2 j) b7 r8 h, S/ V
1 `% Z6 i' Y& H3 J' }; D6 f, H8 B
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";, o6 ~0 M$ l3 @; r g4 z3 ~% Y
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;8 r6 I+ s: g6 W' V) W- P+ ?5 s, o7 T; q
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;5 ]! y/ l( ]! }: r) x( `
document.all.tooltip.style.visibility="visible";
1 C& \) T. h& `3 M }- j8 n8 }5 H: i& c4 n3 M
}4 ]# |; o1 u- m
. q6 g2 P4 c" K1 o6 }, J6 cfunction hidetip()
) o9 Z5 F" R& ^{
1 U+ ]$ J% }9 K! [4 r4 Xif (document.all)0 k( m% v ?4 W- c8 O& [0 w
document.all.tooltip.style.visibility="hidden";& _% ?# W+ G6 E6 z+ E% r
}7 z& S0 H7 B! t0 W) ]
* x! g8 i7 }1 I( J) ?: P
function setcolor(fntcolor,bgcolor)
5 [5 ~+ B# Q# L( C{: s9 `, c K n& d
document.all.tooltip.style.bgcolor=bgcolor;. c( ?" s! z% n3 f4 o; k
document.all.tooltip.innerHTML.Color = fntcolor;) C N3 m( |$ w2 \+ ]1 [
}* `* F8 V/ x4 r
, F' I+ |2 w- Z; \
function showhint(text)2 |! N* z) J- D" H# o' P5 u
{' e. |$ v) f2 A
onmousemove=showtip(text);/ L3 ^9 X# U- d7 H. b5 h2 g3 U( ]
onmouseover=showtip(text);% W8 p( a- u, K+ x# y6 _
onmouseout=hidetip();+ E6 E$ B6 X$ c& \( u2 h
}: h$ t2 j+ V# g# y! ~
</SCRIPT>
) v9 h, H8 p x; z7 N, m: z' y, a6 f3 e9 _- O
. U2 j& t6 f; ^) R- e
5 ]0 h) Z& ^/ j+ a* p* ]
& U! l5 _2 E) @; n+ Z/ Z# A' h& }- k6 i E. N& x
+ ?' J( _' k) H: F+ C5 \2 ~二：将下面的代码复制到〈BODY〉区+ Q% w+ y% k8 `: N+ }" ~# I
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
" K% t6 \1 o# B3 O" b2 Ncellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
% ] u# m7 s/ C: F <tbody>
/ f; b7 L+ Q/ @7 T3 K <tr align="center" bgcolor="#ffdfd0">
5 K& R2 }& g! J9 i' l5 q) l <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() 8 `/ S ?# a3 p9 m
target=_blank>赏心悦目</a></td>
- y# T& T& j" c! F3 G+ u <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" % U. `! `. b7 M5 C( f; l& l
onMouseOut=hidetip()>网页素材</a></td>
! w" q/ ^) j8 z( j <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() - L6 H! d ~3 N" n" }# ^+ [
target=_blank>图像处理</a></td>! e+ x! N3 W' {; M; R
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 7 }1 G" f5 ?- D* Q
target=_blank>网页特效</a></td>
, I& _8 ?# Q+ A: F9 o </tr>" F% h& ] g7 _7 O% D
</tbody> , q& P4 X: i) h+ q( x0 n6 t! b" ~
</table> |
|
发表于 2008-1-21 20:52
|