|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间% l& O. d) u M2 ]
<SCRIPT language=javascript >
( j% s6 D6 z1 W7 I2 }- w/ |document.write(
' i% @& W9 h8 t"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\ W, s @: W7 X0 B/ l) B
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
6 r9 i2 P N8 s% a3 i$ ?7 v7 G3 n! ^5 s
function showtip(text) //显示链接的说明8 q( O; x! d: w! i8 L8 y
{9 a8 @" _9 O# n( \
if (document.all&&document.readyState=="complete") //针对IE
& N$ p8 C9 R# ]! l( h {9 ^1 L% g$ ^: ?& o9 @
* g+ f% j0 x' S2 i
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
) B; |5 G9 T. L6 t) q- k+ V9 O document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
4 i2 d5 f5 k( y/ d( z7 m8 [0 ^ document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;; g( e" f) D1 A+ P9 J, g; f, ]5 q
document.all.tooltip.style.visibility="visible";
3 ~4 H! U6 W3 R2 h4 I* ] K. K }
% n# s, n. o/ R T}) f( \ D% Q/ }( I' @9 H
2 `, x7 b; y2 F4 U2 l- R
function hidetip() $ O3 t: Z6 I/ U0 v- i$ u
{' p' \% d5 J" d( U5 j* B" f6 f/ x
if (document.all)
5 V6 ?- ^" a" |6 O t) Y! t; N document.all.tooltip.style.visibility="hidden";7 N- e2 U+ @6 o1 W a
}* P8 U# L/ a; r2 x9 _* |& E; [
( _. {9 k7 G7 r6 nfunction setcolor(fntcolor,bgcolor) ^6 H4 k7 z# u: |. Z
{
; K: N( P% i5 r2 F& a( p' O* B document.all.tooltip.style.bgcolor=bgcolor;; @- w& ~* `4 l) G }, ^: P$ @
document.all.tooltip.innerHTML.Color = fntcolor;
& i2 r5 y) _8 C) {# Z, e}
* h [$ Y7 } i& S+ y( d* y, n4 i# w8 O5 u
function showhint(text)# Q; O, _7 n7 K* G
{: I% m6 U1 ~" W( U' f L
onmousemove=showtip(text);# I% g- _( l. G$ z9 D w3 |1 p
onmouseover=showtip(text);. L* G: z* u" Q/ N* t
onmouseout=hidetip();
! D# n9 ]0 M+ Q, v/ D4 `}
1 C7 M5 b: _' a</SCRIPT>
u M3 d) O. k$ o, t1 X1 M
; Y' j0 o+ h) n8 ^8 u$ n& L, H& M1 C
3 a4 r7 b$ h- L# h$ f0 S4 h, U/ Y4 I X1 J3 S9 z
: h% A, `, v' |- e$ i" m
# r9 I; `9 [& \2 K- u$ j5 k3 q1 y) g7 h" E
二：将下面的代码复制到〈BODY〉区( v" t2 p- d; o9 t* K2 P
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
: _- f" [6 p6 h1 s0 z* i( Q( \cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
v3 @4 [! u) v6 m! M+ | <tbody>
8 `9 x6 j* T' e q <tr align="center" bgcolor="#ffdfd0">
8 b- O3 u9 G | <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
) u1 a- b! F2 Z9 j target=_blank>赏心悦目</a></td>/ {- d7 m7 `. M# D1 k" x! J
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
. e- |7 v8 Y6 Q* u' v1 c onMouseOut=hidetip()>网页素材</a></td>3 A9 A6 f7 r+ E
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() ! d) o1 d! z. S D$ j+ X6 l- z
target=_blank>图像处理</a></td>* p: y4 S U! w4 _) p
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() ' Z! T1 ~4 W/ p1 g$ h& F
target=_blank>网页特效</a></td>' ?, {6 f& \5 o) @; V
</tr>
6 G: ?- V: }2 f' K5 b- M" U </tbody>
5 ~& v# l, B* I5 r2 R! b </table> |
|
发表于 2008-1-21 20:52
|