|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
; e9 ~8 Q! f M, K" P' |- @<SCRIPT language=javascript > B5 Y( l+ u! [2 B6 a& d
document.write(! t. B3 [( q4 o% Q
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\+ B% C& L& U X
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");& w& e' N& K: R) ?1 |) e
% g$ ?+ Y& `4 F9 nfunction showtip(text) //显示链接的说明
# L/ D) _+ r6 Z8 z$ O+ v& E8 }, d3 [& i{
; _1 v) p3 M! L, [* B if (document.all&&document.readyState=="complete") //针对IE3 [, O0 G! i2 G
{. i7 z6 f- D% `
" K+ J: d9 K1 D document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";/ I1 W! E. \7 t' G- L' y3 ], k
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
, {) k1 a$ O3 w8 ^7 a document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;' |6 s( p% O5 Y; B
document.all.tooltip.style.visibility="visible";
& a: ^1 [& @4 [4 j6 I/ J3 j: W }- o% V) }, r) W* g
}
$ n% U0 \$ L3 b# E, S' l# v/ c2 p( E9 T7 P
function hidetip() ) s. e% h6 J8 U! e3 q4 U* g) @, u
{
! o! L3 ]- I- c$ z; L, {3 Lif (document.all)
+ \2 V: K& `$ m% z( @# ^6 k document.all.tooltip.style.visibility="hidden";
0 t/ z9 }& ~& u, T& q}
8 \, J4 a1 Z9 J: ~
0 S8 z4 ~! F. q% O: yfunction setcolor(fntcolor,bgcolor)
: r, q: W% v, r6 _{$ y& n0 ^) H$ L' J# Q. U$ v
document.all.tooltip.style.bgcolor=bgcolor;
7 ^+ t) z+ t( t5 e: ~ document.all.tooltip.innerHTML.Color = fntcolor;
! @. T; U8 y9 a1 P}3 W5 z" d4 U# d6 O: x+ D
2 b0 o; g2 ~7 @) {. w( v
function showhint(text)
. s1 e! ?! h9 b0 ~! m. f7 R{( @2 m0 P% U9 S6 s5 H
onmousemove=showtip(text);/ L3 O, |) i7 A. y P
onmouseover=showtip(text);9 E9 V( r, E6 l4 Z1 R( ?/ y+ h
onmouseout=hidetip();( Z+ N/ `' g, v
}2 t. }, J: V( p; r! m# U9 a
</SCRIPT>
, L8 L9 u" Z$ e- Q3 ^. T- U; E0 j' M4 E" I
8 N2 v& V; [2 W& l3 F9 M1 Y
3 y; a6 W5 o* s) k4 K% j1 Q1 c2 ~* D* U5 A- k7 s2 S) H
* t. i8 v. {+ z6 D
- Y' j, u0 r* F/ a0 s/ e二：将下面的代码复制到〈BODY〉区
3 [/ p! Q# G5 T" V" n1 G8 u<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
+ K3 r2 G) X6 k& T: u- t; }/ A/ F0 wcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
( Y& }' X. {' X& s <tbody> - [/ l) e$ ~* ]$ ]( a
<tr align="center" bgcolor="#ffdfd0"> - G' b0 J4 `; X# |: F! G
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() + k+ M" c g4 _1 k
target=_blank>赏心悦目</a></td> z) x) f2 W7 {
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" ; w4 O- x/ R$ V, d
onMouseOut=hidetip()>网页素材</a></td>
& Z9 V8 r6 b+ W3 p <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() - k: G) E+ Y- ~3 `$ N9 ]' _. i
target=_blank>图像处理</a></td>
1 t1 s7 T/ a* [9 A3 A |: ?& P5 S <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 4 `4 M0 x6 E( `# h
target=_blank>网页特效</a></td>
& p' D; @3 I, J, a& C$ |: \4 U( i </tr>- `4 M$ H+ }0 Z% W" C+ d# p
</tbody> & v5 b1 i( m: P
</table> |
|
发表于 2008-1-21 20:52
|