|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间" }, J; [$ k9 Q8 `) { m
<SCRIPT language=javascript >
' V* G: k# b [document.write($ B/ B- E/ k# J4 q7 L
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\! q7 d3 O7 T* X8 `- {
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");; V: m! F2 C. x5 k" Z# J
( I4 R/ r9 o9 ]. f1 D
function showtip(text) //显示链接的说明* |, J* t# j% J7 H) i6 ~' b
{! j7 q$ N+ X# {5 H' D7 x
if (document.all&&document.readyState=="complete") //针对IE
$ h- Q& I) w* {$ a! ] {8 f) G; F2 y% |2 Y) C& H4 u5 S
- g. C7 S' A% B9 F' K2 o* G document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>"; W) J4 h" b& r! A2 ~; Z* o5 F
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;& G7 T0 K2 o+ T, A. C0 `. i
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
6 G. x# h! b6 W. M2 z$ } document.all.tooltip.style.visibility="visible";
, o; i* \3 a9 `8 w; j5 @ }
* e' Y/ F; ?5 j4 a! y}
" s6 L$ z5 X: w, ^
# v6 T' q* g$ p& d! f [function hidetip()
8 L+ I0 K# \+ h' |5 Z{
$ D+ G) I0 C4 E% ?( ~if (document.all)- M4 D3 A8 F9 `5 f+ z: _, l
document.all.tooltip.style.visibility="hidden";
4 d; a. R: Y S$ q}
" F2 D/ H# _8 M0 g/ t% Z; V5 o" d. @" O% n j. | C' |
function setcolor(fntcolor,bgcolor)
! f4 R" i% b; P& {# A+ R" s{/ ]5 c* {4 Y; p# q B- \
document.all.tooltip.style.bgcolor=bgcolor;3 i0 S) |+ R. k# f A
document.all.tooltip.innerHTML.Color = fntcolor; t0 O" J, J, C7 p
}
0 s/ T1 h, T( \- p) h1 i* R' x8 g8 Z
2 j- O8 k+ |1 f" L8 a( pfunction showhint(text)
$ P% l) ^: A2 C6 P3 [. n) J{) s: J6 ]- \' b; W6 x
onmousemove=showtip(text);
8 R! A) e8 W7 q' a3 K onmouseover=showtip(text);
% e) @1 U8 s+ \4 p" p- T* Z0 a, f: m onmouseout=hidetip();% r3 D+ }$ X* u6 V) \" w) J
}
a, s3 r2 J. I</SCRIPT>
8 }: s! k" T# @2 i l3 a
& |' p$ F4 I3 h3 a1 K1 N `, t" A5 ?
8 ?' w2 I2 v2 J* w1 j4 e/ ?! W+ Y k1 b- D; k6 t
+ T4 E: Y$ \# r$ q4 s6 `# b3 R
T" W& ?/ U# P3 p% y+ K0 G
( f2 S7 F$ x$ E二：将下面的代码复制到〈BODY〉区1 D: E; u# u0 j8 H/ h1 O/ _
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 ) L1 A \. k: ?. g, y8 |* o* t
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">% Z# v# {4 e) S( U
<tbody>
2 k7 ~8 X L! f$ Y <tr align="center" bgcolor="#ffdfd0"> ) T* l( T; M3 {- n
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() $ S: r3 G# X9 z" T1 X5 X9 X) E
target=_blank>赏心悦目</a></td>
; c2 `9 r ^0 I9 b2 d <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
4 Y/ B3 D% S- s3 u onMouseOut=hidetip()>网页素材</a></td>! k2 E- c! A; W5 u9 z/ y
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() ; ]2 E0 F( x4 \" g. i
target=_blank>图像处理</a></td>% C3 U6 s# d6 u$ v) K$ @: A4 s
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
: X9 o- C' [7 Q target=_blank>网页特效</a></td># I9 z. P$ V6 K/ a8 [
</tr>3 y- R0 H5 U3 S3 y& x
</tbody>
1 r/ _& `1 q# u: v4 Y </table> |
|
发表于 2008-1-21 20:52
|