|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
# l5 i5 @9 {' j8 x4 h8 e! q! D<SCRIPT language=javascript >
2 i* W9 \, ]1 e% Idocument.write(8 v; u( z& a0 X% m$ ]
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
6 I2 ]4 w2 ]- |9 C- Y;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");3 e. `; r$ Q* g% l
% U T$ j' L' f" U* B
function showtip(text) //显示链接的说明: X6 ^ b* z, }6 q, c- }8 d
{
3 m" v& a6 x- b! I# A if (document.all&&document.readyState=="complete") //针对IE
9 w2 R. }, o$ o2 H3 V- V- H {
( u0 J4 V# z, i- Q! u( `- R & k2 z5 @! T( S4 l* m7 A4 ^
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";1 p7 s* L8 M8 @
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
# M1 t7 }6 U$ d# n" y- S, F0 ~ document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;2 s' G$ F1 M& z" ]3 E0 n" [% z
document.all.tooltip.style.visibility="visible";
9 q$ u+ p! J* b# |! c+ X2 L }$ W; r/ O- ]3 G' }, @
}
* k' E* k7 a" S2 a k( ^2 Z$ ~) t. G! V. L; W% I
function hidetip() 0 j- x! R; ~4 ?7 O3 q$ U0 i
{2 Z! W& b' q$ S, a' Q* @9 t& v
if (document.all)1 p% ]) t8 v9 A) B7 E
document.all.tooltip.style.visibility="hidden";; m4 i ]7 Y' m; m
}
+ ]1 P# T; L/ W5 p) E; d: X$ Y4 l5 Q3 p2 [ w* K
function setcolor(fntcolor,bgcolor)- J! g/ t; X6 v% ~! P4 d
{
1 _; J0 Q0 r9 L# M document.all.tooltip.style.bgcolor=bgcolor;( m! Q m9 U8 J) o/ {! g; H9 Y
document.all.tooltip.innerHTML.Color = fntcolor;
! ~+ i' r7 q' M: Z% j3 r}- A; D# _: D; H
3 w4 ?# y) [! f$ Y# R$ r8 G+ }; m* Yfunction showhint(text)
( Y! ]1 C& I( U- i! ?9 L{ M5 a5 |; x% }6 j3 l
onmousemove=showtip(text);7 M8 g1 \, X, ^3 o9 [0 c
onmouseover=showtip(text);
: @6 X' o( Y* P7 P onmouseout=hidetip();1 C2 B6 k* t& q; v) E8 Y- x
}( s/ o3 h; f% Z# {% c( L
</SCRIPT>4 l: w( c7 J# X! B( R- b" b( A
3 G, t9 ^0 ~& o u
; l( w5 N" z$ [
: C7 |' E9 O2 E8 I. L7 W& Q
+ `8 ?) q( i# {" x2 \" l8 j1 t1 j- q6 J8 _
3 l2 l% @0 C0 ^0 p3 ]1 r; `二：将下面的代码复制到〈BODY〉区$ |- A& N. q% ?/ @ g# c+ l7 k
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 * Y( o$ L2 D5 [( W
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
6 l! |* f2 G; S# w$ _) s6 A <tbody> # {8 E7 M' l3 k, |+ ]- H
<tr align="center" bgcolor="#ffdfd0"> ; t& F* ^6 v' ^# w; ^' J
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() 0 `) V6 o9 y" |9 {
target=_blank>赏心悦目</a></td>! N/ O" b# G- G3 E
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" 4 ~; F [/ m5 ?& r P% @5 w% C" p
onMouseOut=hidetip()>网页素材</a></td>
! ]" L" `& k: ^$ G2 ~. y; t <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
; c; M( ]3 y/ m4 F0 s target=_blank>图像处理</a></td>
) e' J) _7 R4 [. C& a <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() ' J' M4 ~( @5 K! b4 O- m4 V
target=_blank>网页特效</a></td>8 n; [ A+ I* [' t8 @ D
</tr>! k) I% c3 r6 m# P x3 A
</tbody> 6 p4 @5 f" u* ~
</table> |
|
发表于 2008-1-21 20:52
|