|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间( E0 Q! H. B( D8 e- f3 d3 V
<SCRIPT language=javascript >4 c0 P- F8 e M j1 J; T* g
document.write($ y7 O1 w' W# p, m x( K( h, Y- f6 H
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\; j3 J C+ `& [0 a0 p: n% Q. X
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");/ r: k# e; G" T6 ]/ I
9 u: M0 ^3 h$ h1 ~function showtip(text) //显示链接的说明6 I: @/ Y$ l+ F* t
{: J4 @7 a0 Y% x# [& o
if (document.all&&document.readyState=="complete") //针对IE
) V/ ~- c! t) a! L+ f0 R1 t {
. N& f) J6 y6 o: E2 O1 X # z" Q( c" N3 G
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
% p6 ?& H$ N" b) Z: f, B, H document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;# ^: t8 [/ W* H& z3 ?5 g8 y) Z
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;4 D* C' r$ k R1 Q! F
document.all.tooltip.style.visibility="visible";% R7 `5 l$ i2 p
}
& B; j9 j7 r! L& z}4 T6 n! A7 i8 }- }8 s
4 f# M4 B* n0 g" q. C. g, P; E
function hidetip()
+ c" ?" q+ y* e! R+ ]5 X. o{1 P Q# S$ f1 v$ ~" E
if (document.all)+ d9 Z8 F: |& \) p7 R8 a% O6 o
document.all.tooltip.style.visibility="hidden";
- H( B) @% i6 |9 m, O6 I}
i( X. i% V9 _1 w' c; N. h8 ~+ Q' p, V$ g- a: B0 Q7 x
function setcolor(fntcolor,bgcolor)" I l W X1 G, B' X3 n% s+ \- }
{
5 q# Y1 F& m8 S% c: |7 p document.all.tooltip.style.bgcolor=bgcolor;, Q3 M! Q% Z+ W7 \
document.all.tooltip.innerHTML.Color = fntcolor;8 J9 ]; Z7 c# p, B
}
. @' B# O. F. i/ O3 F% {7 a8 ^/ a8 R
function showhint(text)
& P* j! r4 P' T, _ m" ?{
. J/ f% h+ d, V onmousemove=showtip(text); n J+ ~$ Q- u+ s8 c" a
onmouseover=showtip(text); O9 C& R) I1 o8 p+ u; {' @
onmouseout=hidetip();4 A# {8 w5 V: ` J! u; w
}) z T$ Z. W0 C" g/ \* d
</SCRIPT>
! ~$ G G: S) ]. M: E5 A4 M$ f9 L) M: N8 S
( }( F% F( G, R% X
4 h; C1 ~* b- N6 g4 N4 B
* X" b& _ t* w+ v: x' V, @3 }
% w8 ]) N) u7 N+ h
: S5 }- [- l- r二：将下面的代码复制到〈BODY〉区
' [/ n* X0 O+ C& e" S3 a<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
4 ^7 Y* y8 {& Lcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
7 H0 r, O( r) g! E4 x7 l <tbody> % p* R7 J* h- U# a0 S) I
<tr align="center" bgcolor="#ffdfd0"> 2 f+ k2 P8 m9 A4 v, c; T" w
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() 1 X K4 B$ @8 v' f
target=_blank>赏心悦目</a></td>
4 C5 [( k! p; M# X <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
2 V7 }. K; V) t! l" V) F onMouseOut=hidetip()>网页素材</a></td>
: ^7 y8 T$ m4 C1 _7 E, e; b# E+ [ <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() ) K1 Z+ J4 \( R! o* G" G. d: M$ W
target=_blank>图像处理</a></td>
3 `5 N" c2 S# |) M# X5 L <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 6 v# g0 c0 M5 A; T |0 P2 s
target=_blank>网页特效</a></td>, J5 _& Q9 P! }
</tr>1 u) w! S7 K+ q* e
</tbody> , n( Q! E: A; y K W, l+ e, j
</table> |
|
发表于 2008-1-21 20:52
|