发新话题
打印

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



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

一:将下面的代码放在<HEAD>与</HEAD>之间* D, X$ R% @$ {( ^/ G( {# e1 K# @# B( j
<SCRIPT language=javascript >$ i/ M% ~' Z4 v3 V
document.write(
$ G8 z/ ^- X0 b2 j0 d2 M"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
& v  X* e  Y4 H* s# q;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");$ k3 @7 H  i, G/ A
1 F2 [9 q- Z7 }- g. ~' f3 A
function showtip(text)  //显示链接的说明
4 C6 E/ c& ~8 w0 ]. D{  ]+ Y: N0 O/ }6 F, ^- n
  if (document.all&&document.readyState=="complete")  //针对IE% g6 j: M2 H* J% {; W( Y
  {2 ?5 P' g. o2 [5 l5 @4 V% ~/ j" |
  
$ C, ]5 c$ ~8 {! d  document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";' b- A9 G- I; A  r6 r/ e0 @! ~& ?
  document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
9 Q' h- `$ H5 _7 r; g  document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
' s1 @$ P* d( \% V5 d  ~$ a" X   document.all.tooltip.style.visibility="visible";$ T& d* h  m, P/ @0 Y+ H
  }: \* {! u2 P; z# e7 x
}
( a6 o2 G3 H7 N" ^. v* y# p" Q
' C( T- j$ }8 q* E; _function hidetip()  
8 y, w1 W" f, M1 k9 ~0 r  B{
) U4 k& d2 n2 Q* u' qif (document.all): [! L! u) l1 C. N
  document.all.tooltip.style.visibility="hidden";
' r- q5 O0 B) l& l2 I8 X9 k}( C1 l- M7 D( v+ M

6 Z9 a2 s% ?/ R- W# b" jfunction setcolor(fntcolor,bgcolor)
+ r6 G% u' I% t# a8 N{0 [' t9 r$ Y# @7 p6 T9 b
  document.all.tooltip.style.bgcolor=bgcolor;! w. j. }. g( _6 y5 r
  document.all.tooltip.innerHTML.Color = fntcolor;: x: U: R' P9 V7 T) u
}
) ~0 l( `% ~9 U; o2 [
3 x  Q, l$ `* L  O8 f3 V2 lfunction showhint(text)
# ^2 h& |1 F( {+ k{
, F1 M+ q( I( H$ K- R6 U      onmousemove=showtip(text);
1 r, x+ P2 p7 ]! f      onmouseover=showtip(text);3 W8 U: U/ I: R- t/ y$ q! G) r( }
      onmouseout=hidetip();$ p" C& ]: v8 p! R
}3 b! t3 K: d' k
</SCRIPT>
4 d$ O9 s& p/ ?1 X/ d- \+ B' N$ z3 a3 C! m/ l
9 f" y+ q2 T# A( _

4 _4 s4 D/ c, `4 O; w. C  W) S" y* ~+ r+ }3 Y! t0 s
/ v5 P, |  ~4 {+ x9 n0 b1 v% P9 q  X; f! `

1 [- l: K, m. j二:将下面的代码复制到〈BODY〉区
$ y/ T3 h! s6 z" G  j$ W9 T<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
4 C7 s# f+ U6 Bcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
3 n* y. w+ G# W" D0 L( {              <tbody> / Q! h6 q4 N$ C. [7 Z
              <tr align="center" bgcolor="#ffdfd0"> 5 a0 I9 m" p. t
                <td height=9 width="25%" class="css3"><a        href="../../sbtx.html"        onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松!')" onMouseOut=hidetip()
& v% n3 Q7 |8 a& s1 P      target=_blank>赏心悦目</a></td>6 ?+ g$ Q8 [& x/ t/ x7 [1 _
                <td height=9 width="25%" class="css3"><a        href="../../flashmenu1.htm"        onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便!')" . g9 k9 k7 ^( c4 b0 ^' p
      onMouseOut=hidetip()>网页素材</a></td>2 W: @- d; j' g3 V4 J* B
                <td height=9 width="25%" class="css3"><a        href="../../wyjcs.html"        onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
, ?; f: I; C; y3 a* R1 b, S      target=_blank>图像处理</a></td>' T( z/ @* [0 X* N
                <td height=9 width="25%" class="css3"><a        href="../../soft.htm"        onMouseMove="showtip('网页特效<br>网页特效的大宝库,有详细的使用说明')" onMouseOut=hidetip() * J" F8 c+ i% G# \; {( a" ?
      target=_blank>网页特效</a></td>: A- r7 r6 O( ?" _/ v
              </tr>
, b& j* U% X$ n" }              </tbody> 6 Z2 B# ~2 h+ V& p
            </table>

TOP

发新话题