|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间9 K. \3 Y1 d3 ]* N7 i. m0 ^* p9 u
<SCRIPT language=javascript >
1 B+ @1 @5 R. idocument.write(
+ o9 J6 A! h1 g"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
W! Q& m& w% h F( z;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
% @+ `/ M$ [4 z$ N" [7 \- X n9 A4 E/ y+ [) ?" }. q
function showtip(text) //显示链接的说明5 A+ B! T5 i# n
{3 J" H1 I2 v8 n" |8 y2 [+ O/ ?- U/ G
if (document.all&&document.readyState=="complete") //针对IE
, {& `: R/ _# w {
* |$ g+ o% |) o2 x6 x
0 K h! e: _0 e: R5 h& n document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";" N# Z4 n$ M7 L/ b2 B! k1 V
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;/ F f+ e' I! T3 I6 w) ?; Y
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
# r! Y( d3 W+ I2 g& [8 G4 [2 ] document.all.tooltip.style.visibility="visible";5 r2 X+ ^: F# c
}! c8 s. B- T6 W/ ^) ^
}
0 S9 U& }7 T. n1 z1 ?
. ?0 N/ q$ Y- l; s+ B5 G) P3 w/ {function hidetip() 5 e; @) t8 e, x" o
{
1 E3 ]3 _* V( H# D6 Aif (document.all)
; ?5 p' c+ R! [( o$ l2 q document.all.tooltip.style.visibility="hidden";
4 S! l! T/ D. j- ~! t}
3 j9 C5 H; Q6 p* U& e/ m) P
$ N8 b' K- H' _- w3 Jfunction setcolor(fntcolor,bgcolor). ]) u- S$ x. Q% `, X( U( ^5 D3 z
{0 s: e# v3 Y' ]8 y
document.all.tooltip.style.bgcolor=bgcolor;' r3 R; A5 t h: T
document.all.tooltip.innerHTML.Color = fntcolor;1 P U- D8 P% T2 s4 L* s5 A
}: F0 I0 h% R2 ^" z8 u
( U& v, ~7 m/ n5 U, i+ Rfunction showhint(text)
5 U9 z% a; N: x; K{" r3 B' D. C- Z2 C% d& d
onmousemove=showtip(text);
# v1 E8 t4 Q1 V6 T, }: F onmouseover=showtip(text);
1 W) H w6 p! A+ |. F$ O onmouseout=hidetip();5 ]+ k" q! X& X
}0 F4 F9 L$ X2 `. Z+ n+ r
</SCRIPT>7 u R1 s: _1 o: |& ~0 K% T+ U) G" u
! [# }8 E( o- v! C2 V# c# Q' i# ` K1 c7 ^/ R* {) W) \ q
7 j3 w8 q$ D i+ \: n: P3 g
. Q5 |$ S% f3 T- S. i# g ?2 _1 Z8 X3 `' {) x9 M
0 G" j8 a1 w+ D7 F5 p& J二：将下面的代码复制到〈BODY〉区% {- T6 m# F5 e& P- s
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 / J4 x/ r1 u2 J- B1 h
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
7 v; ]* U- p/ i% y( p3 J f <tbody>
0 j8 l ^% O, X <tr align="center" bgcolor="#ffdfd0">
$ ?3 }- l R8 o% w7 F/ p <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() ; R" W5 g: N: t# \ v
target=_blank>赏心悦目</a></td>
0 s: @" ~. S( J <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
' ]/ \6 I. E% J) G( Q& Z onMouseOut=hidetip()>网页素材</a></td>
+ Z( r8 J h0 w8 p" H) `3 Z <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
" `, Q& o4 e2 E7 Y* |$ e$ W target=_blank>图像处理</a></td>
" ~6 s( E0 @% O! N$ H% s ^ <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
& L/ L: \; P' N( }5 A target=_blank>网页特效</a></td>0 j2 t2 g1 q; I- R8 s# M7 U: {
</tr>' r. i7 L) J( s) W9 r: `: v+ C% E! M
</tbody>
) x( L# r. q. w1 W |2 P5 ` </table> |
|
发表于 2008-1-21 20:52
|