返回列表 发帖

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

一:将下面的代码放在<HEAD>与</HEAD>之间1 s6 `, ?6 T( t2 m3 `. \% ^# K
<SCRIPT language=javascript >
0 `! Z7 {0 \% u# y& e# N- gdocument.write(
3 J* ^( c5 U7 |, R2 {"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
) o" {, O& |; Y. H;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
" }4 \; t' {- [) {1 n* [3 V" p; S
0 S8 X" l5 \! N" k/ }function showtip(text)  //显示链接的说明# Q) W+ X! C7 ?8 s
{9 ^8 u% w7 s) q5 j4 f; F
  if (document.all&&document.readyState=="complete")  //针对IE
( K- x* N1 g2 D: h% X% R: B. Q  {" O" w* s  [7 n& `& r
  / r! G  T- s& P
  document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";/ u2 V. |# K2 v) N% F+ Z$ V/ r
  document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
( ]5 m3 n% z* u  document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;4 g$ z& ]1 i2 N# {. n
   document.all.tooltip.style.visibility="visible";
% K$ i4 G6 f6 r9 ?! m* W  }
) E8 J* m8 O; p  s}
0 W; |( N4 [4 `: l- H% p: t! e! [/ p' |2 I8 r. M- }
function hidetip()  9 `' }% C) d4 G7 E& A9 ?. [& e
{5 U6 B) S7 U, @9 t* c0 P
if (document.all)
4 v( I* ^# N# O3 ]7 m  document.all.tooltip.style.visibility="hidden";4 v& q7 l% W6 ]! Z5 y: n5 ]9 g
}
7 Z* y8 M6 y* y% v3 K2 M4 e. D
6 R, d# H1 n# G( z% ifunction setcolor(fntcolor,bgcolor)
# U) I. W: z: {( }8 a% R% h4 @3 d{
$ U  p' ]& [, z+ j3 D+ W& Z  document.all.tooltip.style.bgcolor=bgcolor;) R  Z4 A- G$ ]# _2 c
  document.all.tooltip.innerHTML.Color = fntcolor;
2 H; p, `; R5 p! h}# S% A* G8 b7 O( \$ M! {" X
: b: d9 Z# z# O0 g- C6 p
function showhint(text)* K" z5 {- t6 s4 O
{4 o7 Y" f1 s( X
      onmousemove=showtip(text);7 s: Z: R0 F* ]; \6 }6 a
      onmouseover=showtip(text);
: }# Q/ y3 F# q      onmouseout=hidetip();
5 b$ w; X" V- p7 R, y2 h. `1 o}0 j/ P& z6 ?8 j9 N3 K9 K, }
</SCRIPT>5 g! X' w1 l7 O

, f# y/ I3 ~, S8 J  W
" }& F/ M6 n8 P- T; ~; w, d/ f# p  f6 ?! T, I! Q; V. Y

$ I+ L2 |+ i9 n* Y( y5 n
; g5 A5 c; f; E4 h
+ j. Y% V% F4 v& S二:将下面的代码复制到〈BODY〉区) Y% E5 ^! ~7 a3 I
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
+ F' G- D: R1 k- ccellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">: H% w4 z$ v3 X" [( ?4 p
              <tbody>
- n, r2 L2 M' }4 ?& w$ E              <tr align="center" bgcolor="#ffdfd0">
) a) e7 `; ~3 ?: n/ ?                <td height=9 width="25%" class="css3"><a        href="../../sbtx.html"        onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松!')" onMouseOut=hidetip()
9 D. p6 ~) P% D      target=_blank>赏心悦目</a></td>/ [( |# w+ H& t" P
                <td height=9 width="25%" class="css3"><a        href="../../flashmenu1.htm"        onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便!')"
) ?3 H+ J$ A$ I. K6 i. b      onMouseOut=hidetip()>网页素材</a></td>
4 P3 V9 D, m1 ~" G& V. V. V9 S                <td height=9 width="25%" class="css3"><a        href="../../wyjcs.html"        onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
# ]6 w4 N( ^" w, i      target=_blank>图像处理</a></td>
. S. f/ K% y0 B4 R" x                <td height=9 width="25%" class="css3"><a        href="../../soft.htm"        onMouseMove="showtip('网页特效<br>网页特效的大宝库,有详细的使用说明')" onMouseOut=hidetip()
: `2 w- `" r- I* j+ Y      target=_blank>网页特效</a></td>/ C; x3 G  R6 R* M, l
              </tr>
$ R7 z, I' F$ E, D" [9 C( Z              </tbody> + P& C5 d1 \9 X- t) t% c; F
            </table>

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