|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
- o6 g. |2 u% L8 `* {/ R O<SCRIPT language=javascript >- Y: r' c, h' e
document.write(
/ l% }2 S+ x+ j"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
2 ~( B7 a0 h$ H& Q3 A( M;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
! K' V2 B2 |' y( @% G& ]& ]# t: e# q( H* E! \# v- v& ^
function showtip(text) //显示链接的说明
2 P& D# V5 m! y* v' A- w" g, C{3 y8 V4 x m+ i) ^' ]2 D! z& V# i
if (document.all&&document.readyState=="complete") //针对IE
& K% o0 Q$ n% p+ O5 w1 R7 ?( } {
# e7 L. A. `9 t 4 q( F; D" U4 g& y) ~! b
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";0 |( |5 ^, [) O2 |. O2 J5 J5 T9 ^
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;2 N, p0 L& I p( X& T
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
7 w6 I* G+ \1 c) c0 X5 h/ o document.all.tooltip.style.visibility="visible";
* ]" U# q V3 I" z) V2 S8 {! ? }8 J& N& V% R( W: Y6 z9 O7 a0 T
}7 l w* [1 o1 ]1 c3 l
; ]6 D" V! P# H$ n( P
function hidetip()
9 T) ?8 D! O. }. t8 N{0 o2 t$ Q0 h/ G% H
if (document.all)
3 p- L, Y+ X% Z+ s; @5 J* T# Y7 F document.all.tooltip.style.visibility="hidden";
7 {' p/ |, i+ o' R}
, L& @4 {- L& J
8 \3 W$ S; s6 \6 H' Z1 ^! yfunction setcolor(fntcolor,bgcolor)
! y7 T5 z) e+ n5 v- l; s; Z, A9 c{( P7 }+ w2 F" a1 j# X
document.all.tooltip.style.bgcolor=bgcolor;
6 Z3 U* T- p+ x6 X; d document.all.tooltip.innerHTML.Color = fntcolor;; S C5 y# q8 X" x6 ?
}
7 {1 X V# z* Q, s2 M4 G2 Z g& O8 {. D0 J0 ?* y5 K
function showhint(text)6 c! U) H9 x1 Z0 P* c! ?9 ~! P0 K
{
$ O- h/ N1 o6 G/ j; G$ s( M2 O onmousemove=showtip(text);* |+ q9 n8 N2 n8 ^/ W1 K! ~
onmouseover=showtip(text);0 n/ ~# N0 m9 B0 \& ?
onmouseout=hidetip();
; t, _+ R, M3 Q4 b D5 W}2 M" j- M. p- I: ~- F
</SCRIPT>6 a! m9 W ^- e% b) q+ O6 ?
3 |! }! ~& |6 r c9 B* S* f( C9 I7 O" w! n5 r- Y6 d
$ o$ V, R# L. h( x$ B8 l2 m, w
& U5 f: o! V$ ?" l7 }
3 c! R8 \4 {9 V) D! `1 Q
6 A+ K0 ^" s+ { w二：将下面的代码复制到〈BODY〉区
w+ _* n2 S3 A; ?/ p4 r% J1 }<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
* Z( V1 s) S: i& x9 D4 o- b( u$ l' zcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">' |* c, ?0 y! I" u
<tbody> ) ` j1 E3 N2 L$ G: a- t
<tr align="center" bgcolor="#ffdfd0">
: d: ^' M! t$ @ <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
9 {+ e" `- \ D) C target=_blank>赏心悦目</a></td>
( o; k2 d! K) {; c6 I) A <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" 6 Q' g* V9 X& {' ^4 f$ z7 {
onMouseOut=hidetip()>网页素材</a></td>/ q( B. a2 E. {' j2 J2 H' [
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
' J) A4 p- z0 f# X# T. T/ l' \ target=_blank>图像处理</a></td>" |7 s, H2 o0 l, ~" X
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 6 h6 e- S; G& n' h9 h0 q$ O
target=_blank>网页特效</a></td>
2 y* z' ~+ H9 Z </tr>
Q8 z5 K) D; \; [ </tbody> 9 L* [/ c% _/ A3 E! q
</table> |
|
发表于 2008-1-21 20:52
|