Board logo

标题: 网页之带注释的表格菜单特效 [打印本页]

作者: zw2004    时间: 2008-1-21 20:52     标题: 网页之带注释的表格菜单特效

一:将下面的代码放在<HEAD>与</HEAD>之间! m# k0 j9 j+ A, O
<SCRIPT language=javascript >: I" K  @" }' D7 O8 N
document.write(
6 m! ]' j3 u1 Y2 a/ e"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
; E/ W0 h! E! Z) h/ Z( [! m;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");) p& O% T4 C& t0 D1 F* D3 ^
$ e; h$ c( A8 j/ w' S! q
function showtip(text)  //显示链接的说明/ f0 }+ P* ?+ r1 x
{
1 y- g+ Z9 j# t! [7 T0 C  if (document.all&&document.readyState=="complete")  //针对IE7 B8 Z1 ]# ?+ [* p4 X' B# H: Z) U
  {, h5 `8 R& h, Z. K9 {7 f& H  b
  
& _3 P+ J+ f5 ?, ~, n- d  document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";9 M, D4 z- K  m% z+ _
  document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
# C5 y, F6 M$ P+ ~  document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;: `, y! p; F2 x% U8 F
   document.all.tooltip.style.visibility="visible";" b3 f2 k- g( T
  }
, }) r5 N7 x5 o}
4 D! V+ x, I) N
7 w; @9 V2 I3 \1 l( S- \6 L( Ofunction hidetip()  # u# S2 _$ Q$ |- Q
{
4 W5 O$ T! g9 g# Q" `% nif (document.all)1 Y( K2 I1 I" Q3 m( F( N
  document.all.tooltip.style.visibility="hidden";% i' x6 j) u' E4 t  H
}
; P) g/ _; s; ]: a1 h( z: G
0 H+ ~. H: B, t" H2 Lfunction setcolor(fntcolor,bgcolor)$ k4 y, q6 I6 [3 a7 F) O: j
{
/ N4 h& p/ Z. T! ^, e7 B  document.all.tooltip.style.bgcolor=bgcolor;
2 o6 w( O4 x1 _  document.all.tooltip.innerHTML.Color = fntcolor;9 k1 \; g+ q6 Q: }9 x
}
; j7 P4 n' \' c/ P6 C
& W5 o. C& `6 i7 nfunction showhint(text)
4 c! f, t3 k' \5 G{# E& O+ S$ G  d6 O3 f8 a
      onmousemove=showtip(text);4 V  X" n) Z3 }8 `. g) K2 I' ^
      onmouseover=showtip(text);
( G$ S/ K$ D' M      onmouseout=hidetip();8 \+ x/ J7 }2 m
}
2 B5 U& o0 K3 N4 q3 @" X( J' y</SCRIPT>: g# ^0 B( F& y; `& K

, P$ C# L' Z) Z( z9 a3 D' S' }" w
5 X* p& |$ d% s
6 k: Z( H5 ]2 f. [  Z9 i1 ]' |7 Y
$ A9 E  U5 R# h/ @1 @' z2 L
* D' z0 d% {! R6 y5 H$ o& O/ S. ^1 H& C) y8 Y
二:将下面的代码复制到〈BODY〉区8 \* ~7 H. i3 K! }3 W. A7 @! f
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
) N+ g6 Q8 c& lcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
+ ~* P" @. A  q' W$ m, ?) V              <tbody> 9 q: o# e( k$ y8 F9 j
              <tr align="center" bgcolor="#ffdfd0"> & V' F$ p( r$ C7 M1 q, {7 ^
                <td height=9 width="25%" class="css3"><a        href="../../sbtx.html"        onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松!')" onMouseOut=hidetip()   i. s: S- E8 G3 n) J2 H! q* P
      target=_blank>赏心悦目</a></td>4 l1 J( ?( a2 `6 I
                <td height=9 width="25%" class="css3"><a        href="../../flashmenu1.htm"        onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便!')" & b/ W0 E7 x7 H+ }1 r2 V7 K
      onMouseOut=hidetip()>网页素材</a></td>
' C2 N+ @! O0 q2 ?                <td height=9 width="25%" class="css3"><a        href="../../wyjcs.html"        onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() ( P+ g' _# @# D+ D6 F6 D
      target=_blank>图像处理</a></td>
2 B% C- n5 o/ V& J0 X* K                <td height=9 width="25%" class="css3"><a        href="../../soft.htm"        onMouseMove="showtip('网页特效<br>网页特效的大宝库,有详细的使用说明')" onMouseOut=hidetip() # A0 K/ X& d' s. |1 t1 C- i
      target=_blank>网页特效</a></td>9 |% a# E+ ?. j& q  |0 c" K
              </tr>; W) q5 E* v+ [6 I
              </tbody>
# d# k6 K# \' ], a2 N# [& K! V            </table>




欢迎光临 捌玖网络工作室 (http://89w.org/) Powered by Discuz! 7.2