|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
2 t' W$ d. R; [; m- S/ y! r Q<SCRIPT language=javascript >" g: r. f7 d, J6 m" g. o! b& D7 S% Y
document.write(
. W- \- K7 s* y- _7 j4 J"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
* C$ G3 a n, O- o;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
, _% u# A5 U- y7 l5 M; y+ _9 N4 ` \/ a& T" w1 s9 d, Y+ @& l; e# L
function showtip(text) //显示链接的说明
4 O3 Y- L! E9 Y' R" p$ P }1 R{
3 K& j! X( E/ r" q if (document.all&&document.readyState=="complete") //针对IE3 k" u1 o' o6 i1 v
{( d \0 x" s+ G, G- P& J
8 E+ E2 i T- c( P2 S2 Y7 X' V1 W document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
; o) S* ?6 k1 i: b document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;3 H+ J! \) C3 b6 Q* { p! w
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
. {3 M5 v: D" y5 s+ J5 ^/ b document.all.tooltip.style.visibility="visible";
- g5 }' k/ U) v$ J1 Z }
8 t- @1 S. F2 }) N0 W5 l! K}
# h7 S- _4 s1 n& c
5 k0 a( ?: b4 O* j4 R5 Y4 h1 Ifunction hidetip() 0 N& m1 y3 x6 }% n$ B/ O3 V# p3 |+ X3 u
{
1 J9 j* c4 e$ e, N! t2 E5 j$ Rif (document.all)- C5 X5 v0 ?- X j1 U, @
document.all.tooltip.style.visibility="hidden";
6 h0 c5 H+ @0 z3 r! N* E# o% P: M}
" F @: P' W5 U) H2 [
. v: T6 |$ K8 C9 T) p. O4 Wfunction setcolor(fntcolor,bgcolor)
2 c5 Y7 g, Q; P0 X8 Z{# N8 i8 X* q2 m! C
document.all.tooltip.style.bgcolor=bgcolor;
! H3 x7 _0 t/ d7 `" h+ U document.all.tooltip.innerHTML.Color = fntcolor;7 i% @6 X3 L9 l
}
1 ^0 Z) w7 i1 P5 @! l0 | r5 v" \. J4 M
function showhint(text)
) ?) J* I( y$ D7 O{
; I. C4 g. j# t& ]: a onmousemove=showtip(text);
+ m6 [( f; W4 b% s9 x4 c% G: T0 z onmouseover=showtip(text);8 j: v, o$ c6 C5 L( V
onmouseout=hidetip();6 [0 E2 N& I4 N7 m* t/ E0 e
}
$ h5 c/ l+ f2 T2 o0 r+ b</SCRIPT>$ Q- I8 J8 S! l% C4 P! {6 i
1 `8 R% V) @+ X' t4 C% `# n1 M
& G* K0 a* v7 U% c# Y
6 |) o$ ]3 i$ Y6 M% a3 ]' t' d6 C9 X" F3 F
* m/ R. V4 C' K5 l/ z
% r" k I4 j+ W6 X3 s. i: B, c: G0 j
二：将下面的代码复制到〈BODY〉区
0 V2 n, U; d, M/ u* l8 M2 w<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 8 D1 l* X2 Q8 X& Z
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">+ N/ @- h: n% [' X
<tbody> & n% n8 w" b# U! w/ G! h2 x4 F
<tr align="center" bgcolor="#ffdfd0"> 3 _2 x: e: \" v5 ]& a7 {
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() + r2 _1 I2 o [) h; {
target=_blank>赏心悦目</a></td>8 v& G; b- `2 z& M9 X5 v
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
/ U# ~1 p5 Y4 g" f) D9 C! O onMouseOut=hidetip()>网页素材</a></td>+ R1 i6 @; {) }3 S: s
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
& F- j0 d" V. Q* o; v1 A target=_blank>图像处理</a></td>
: B" g/ p( C% x% Y <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() $ h9 g; S/ u$ M8 D2 \1 U& ~1 ]5 H2 y0 U
target=_blank>网页特效</a></td>
6 E- Z* L4 ?2 S8 r9 c2 F </tr>+ e( N) \" Y9 H2 E7 b( J5 a
</tbody> " C- a# `) Z6 d( c6 y% i C+ G
</table> |
|
发表于 2008-1-21 20:52
|