返回列表 发帖

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

一:将下面的代码放在<HEAD>与</HEAD>之间
; A2 o( Z6 B% ]9 ?, `<SCRIPT language=javascript >: m) o5 t0 ^! ^9 U
document.write(! l0 j7 {* a- ^
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
7 g/ p4 f8 T1 p: {# s;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");" \7 I4 q0 I: N$ m5 E
8 G7 D/ r$ |% E
function showtip(text)  //显示链接的说明
) M2 D& E* s3 {5 Q{  G" F& y9 Y. v: L2 y0 t
  if (document.all&&document.readyState=="complete")  //针对IE! [' f  w1 A: n2 F" B9 o- x
  {
' k! d3 `) C4 J8 G# `* v6 h2 D  - u' o/ q' ^! o$ Q) o! F) Y
  document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
/ r2 E( t7 |& P) K. n3 I) Q5 y+ j  document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;% e9 n+ [$ {2 j$ a1 A# M3 I
  document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
& N; G# \( p: T: I8 j   document.all.tooltip.style.visibility="visible";
) @* [6 |  T+ }9 v  @/ u  }+ E6 i6 \6 y9 t# P& Q& O
}
* N: s! o* v% K3 `7 v1 M/ P2 i
- `/ Y7 C" ?& h1 r! T3 _function hidetip()  
8 x$ j3 `" _7 \% p0 _{
4 c  s/ `4 {3 }  T" Eif (document.all)$ d( b. x  ]  Y8 y
  document.all.tooltip.style.visibility="hidden";
6 j, X  L: c* M6 d; ~8 Q& J& @: i}
3 f) V3 j6 ?) B* E4 c9 |% }$ F/ [0 p" R; ~* b
function setcolor(fntcolor,bgcolor)
/ N% t% C/ I& M6 v% W{2 j% |0 Y! u- J! `5 J3 F
  document.all.tooltip.style.bgcolor=bgcolor;
' H, \9 X! r1 v  document.all.tooltip.innerHTML.Color = fntcolor;% l7 d+ C. s! ?& j4 s) A$ L
}
: A" K- n% m9 ?8 j
5 q9 v9 Q9 z# `: L" zfunction showhint(text)) B0 t; q, k, x$ f, i  ^* A  a- }
{
% }1 {- r- A1 Z" o2 [3 D' P. t/ }      onmousemove=showtip(text);
' O  b4 C" U. N" N9 n# D' i      onmouseover=showtip(text);
. h4 V: L% c' n& N) U' c& }3 [      onmouseout=hidetip();
  s) g& i6 X$ i5 ~4 i3 c}4 {, X. N3 \* \1 R! V4 B  O, u
</SCRIPT>3 c- W) i7 c& ?! O; T' Q

& X, e+ L6 [. v0 G7 b
) C5 A9 ^5 }; b' Q6 e* p% @4 N3 L' `. Q3 y: }. _

$ C# L  K5 G% ^# _( y. I$ a% ^8 Z0 K+ @( K7 `/ T- B
$ ~. B: e- q8 N7 F5 j( G
二:将下面的代码复制到〈BODY〉区- B2 Z( U3 `+ e, S& j
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
3 E9 E! c- ?& I% G+ Qcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
' ?( S& o$ }1 g( e) [; [              <tbody> , c: @+ [& U. w6 [7 [- E
              <tr align="center" bgcolor="#ffdfd0"> ! n- Z9 q4 m: w9 F# q2 e, O
                <td height=9 width="25%" class="css3"><a        href="../../sbtx.html"        onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松!')" onMouseOut=hidetip() 0 _$ W6 u, Z2 r
      target=_blank>赏心悦目</a></td>
8 \3 w# T1 i! b( u; h$ a$ P( P                <td height=9 width="25%" class="css3"><a        href="../../flashmenu1.htm"        onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便!')"
* }8 h2 {# n' Y, ~0 ?& f      onMouseOut=hidetip()>网页素材</a></td>
' g: b# P1 U, o9 U: z/ V& R                <td height=9 width="25%" class="css3"><a        href="../../wyjcs.html"        onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() ) E/ |2 ]# N, g, g$ M- B" L; P
      target=_blank>图像处理</a></td>2 J. w: Q0 v0 {6 z5 j" {
                <td height=9 width="25%" class="css3"><a        href="../../soft.htm"        onMouseMove="showtip('网页特效<br>网页特效的大宝库,有详细的使用说明')" onMouseOut=hidetip() - Z& Z  Y; D& V" y7 X6 I
      target=_blank>网页特效</a></td>
3 Y" J" v4 T6 X  i) [' B              </tr>! b) `3 ?' W" q
              </tbody> / u6 }- I: P+ J' B1 Q! \3 t
            </table>

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