返回列表 发帖

网页之带注释的表格菜单特效

一:将下面的代码放在<HEAD>与</HEAD>之间
) q! a! z2 [/ K2 C+ b- z" E<SCRIPT language=javascript >3 Y2 X3 a0 Z. a/ P. Y/ J
document.write(
* B5 s/ E0 r# M8 [; g0 I8 K) K"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\7 ]( q0 p! I! `! d6 h# V
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
* x+ i# |$ s+ V& d
( o, ^* t* V% `2 ~8 _' u8 Zfunction showtip(text)  //显示链接的说明4 m) U6 g) V2 w, o+ r% B
{
- R0 J# C& W1 @: m! H% G. P; W  X) w0 t  if (document.all&&document.readyState=="complete")  //针对IE
! q, Z2 o9 F2 ?0 ~. E# r  {
- c9 U- c9 Q4 V5 \3 n( z  
9 p9 p! K+ K) v7 T# h! a, C5 j: |  document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
. u# M. k" F% R2 h! L' ^  document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
; n- o% u1 g; w, [" L  document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
* T1 v% d3 _  i   document.all.tooltip.style.visibility="visible";* P3 x; Q0 i- M  g% Q; Q0 }" X
  }8 [1 M0 X9 t' D) T/ Z( l( H0 n! b
}
  M$ R+ V+ v& m( U
) s3 ~8 j: J, mfunction hidetip()  - M  X4 ~8 I  j' W% q
{( t& g! k, W2 I4 ?+ e( z# G* d- X
if (document.all)& V  q: \$ {# h7 g/ R
  document.all.tooltip.style.visibility="hidden";
& N, ~/ V' e  B; I8 _  \}5 C  e3 d0 m; S5 f) E( p, [1 M

# A. i4 y; h0 l* ~& t' y  Hfunction setcolor(fntcolor,bgcolor)
" {" s) H- ~5 F2 T: W$ ?6 ]# H2 [0 }{
0 J; m' Z3 S- b$ f* |( G' S7 M  document.all.tooltip.style.bgcolor=bgcolor;
: U. n) }, C! @  document.all.tooltip.innerHTML.Color = fntcolor;
3 q4 E; }* j" e}
! T  W$ H: B: r  [9 f8 j
9 A3 Y& D; I$ B0 T1 W. zfunction showhint(text)
0 [, Q* s& z1 Y) i  j{2 X7 h5 |5 n) n3 I* Q
      onmousemove=showtip(text);
3 k/ S7 M( b0 ^: A) p) z5 g      onmouseover=showtip(text);% Z2 d( ~% R9 \7 q0 o
      onmouseout=hidetip();; q/ J- D2 x* U/ K
}$ l8 A+ s9 t. Q: a/ R2 D
</SCRIPT># {  \  P( t/ M) Z: u3 K6 u1 p1 @
1 Y* {) _: s8 Y0 h: n

) A, y0 x1 v8 e; v3 @# ?( I' s, y$ K8 o' M( _1 o' x" O8 |
" I/ Z' a  T$ B9 q" k

( X) u1 r( T; a9 `6 U/ R  A  ]9 {6 y: W5 n. h9 F: Q( \0 G* y
二:将下面的代码复制到〈BODY〉区4 m7 @8 \3 W2 G& N1 h  P
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 * ^2 f! h+ z) d1 }  [5 d
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
/ x+ t9 p& x4 k  y1 X2 j5 C              <tbody>
! {& Q% H# ]4 ~5 V              <tr align="center" bgcolor="#ffdfd0"> ) y7 F, O" Y+ h6 e: k
                <td height=9 width="25%" class="css3"><a        href="../../sbtx.html"        onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松!')" onMouseOut=hidetip()
0 g1 e& r, k0 M- n- Q" B0 v      target=_blank>赏心悦目</a></td>4 c  q# Q* \' g" x* c" i, k
                <td height=9 width="25%" class="css3"><a        href="../../flashmenu1.htm"        onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便!')" & O7 l' D0 d; g8 O
      onMouseOut=hidetip()>网页素材</a></td>
# Z, j. t( W  p                <td height=9 width="25%" class="css3"><a        href="../../wyjcs.html"        onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() ( W5 @& U2 U% s
      target=_blank>图像处理</a></td>4 K, _  }+ t9 g% q
                <td height=9 width="25%" class="css3"><a        href="../../soft.htm"        onMouseMove="showtip('网页特效<br>网页特效的大宝库,有详细的使用说明')" onMouseOut=hidetip()
+ i- e7 b& i$ M% s      target=_blank>网页特效</a></td>6 U0 r% r$ ?) D' s  Y" S
              </tr>
8 s) ~2 n" q9 J3 E/ ~( x              </tbody>
  @/ N6 L/ i) E$ V: \4 h3 \- q4 w            </table>

返回列表
【捌玖网络】已经运行: