|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
( m# M0 V% l+ u9 r; T( n( {9 r<SCRIPT language=javascript >$ ]$ n6 E: d& j" R+ R5 X1 B6 T
document.write(
: U- V0 K: |" Z9 v" e, d. _"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
& d V# u6 A- u9 o;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
& _4 |$ @+ H) s1 w" [$ V0 h; M8 e* ^9 y! M
function showtip(text) //显示链接的说明
+ Y. N: d: G& t A7 E" T- e; I( O; j1 L{7 ~1 D |- g/ x+ I1 v
if (document.all&&document.readyState=="complete") //针对IE) f# H6 J! ?: F8 U% b' V" R
{
. ]7 p8 }, m7 A9 T) @ : v8 }! P( }2 T! P
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
) {/ m3 u2 ?2 i, k' n6 }% K9 D document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;8 _ B6 Q/ B0 Y. v% i4 x- ?" ?
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;0 W* [& U% I: m' j4 W, z: W2 p
document.all.tooltip.style.visibility="visible";
& [5 l d, E: f/ ?1 k2 S7 n+ @ }: y% y- F9 N' D7 Y7 }6 k2 `/ w
}1 V B0 n e) C4 m0 O5 Y
) p! v% z8 m6 |* L c; V% x
function hidetip() 6 O% P9 B( p) F; K# C: M: Y
{; R. D3 L8 j+ }- i# J' ^
if (document.all)
' P/ _3 P2 m$ o document.all.tooltip.style.visibility="hidden";; A$ K" g1 h1 m% V0 z5 }2 a/ Q% M
}
7 B$ N" S& a: ~3 V2 |
/ c+ P4 M5 n$ S6 k! c5 `2 bfunction setcolor(fntcolor,bgcolor)
?! g9 o) |9 I0 K+ n1 z6 _6 X{
( W" T2 o2 K0 z6 H" ^* Z D2 q document.all.tooltip.style.bgcolor=bgcolor;, A5 |7 N9 r0 Q, B5 t
document.all.tooltip.innerHTML.Color = fntcolor;. X4 ^& \5 o9 A
}
* d2 H+ X, _/ A$ R0 i, |% g2 i' z! l/ l/ q
function showhint(text), m" Q" b7 W; a g% V
{
: v3 L: e M& Q5 Y8 F% | onmousemove=showtip(text);
+ b; y3 G) c' u9 d& [* s0 b onmouseover=showtip(text);$ q' j* d M0 L* P. S( _
onmouseout=hidetip();
2 E# c r3 [5 r2 i6 H6 \) z8 M; N}! n( p K( Z+ s! g' Q/ D1 q+ ]
</SCRIPT>" o3 P! f- ], S0 G
2 z- M; T5 q- A' f
. R* f) t# P! x. |) {) `8 O
2 _6 E# A& d. H0 Q4 c9 V0 q& t0 V% [- V' `7 t
! O; h1 c" @5 W) k* U V
! [7 G5 X7 }1 F- r& t0 K$ [二：将下面的代码复制到〈BODY〉区
/ D3 V$ o5 y5 f$ O4 q<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
; a( R1 Z1 d0 r+ ]* ]" o& Qcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">% @# c2 u' ?. d7 x4 Q/ \$ q
<tbody>
' l( g; A1 O4 m4 {) S; L+ d <tr align="center" bgcolor="#ffdfd0"> % u" C1 n$ l! g# p( ]* h
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() 8 J' G( h8 {. Z3 O5 J* n$ d
target=_blank>赏心悦目</a></td>! q8 x, Y: `2 i7 {
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" ; F {6 ^% a) U9 v
onMouseOut=hidetip()>网页素材</a></td>$ U; i+ l, e' M+ }2 ~1 M h
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() % A# [% [( c6 P2 Y ^+ _
target=_blank>图像处理</a></td>2 Y9 L+ L3 C `
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
+ P6 D; O- ~! B- ^' \2 J% J target=_blank>网页特效</a></td>
# t6 V4 G8 X; r, i' u1 _2 R1 R. d </tr>) f$ W9 _3 M6 x: u( X7 `. d u( q
</tbody> 4 N4 Q! f' {$ \) p/ a5 w
</table> |
|
发表于 2008-1-21 20:52
|