|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
' @6 ~6 U( S: t& N<SCRIPT language=javascript >
8 m0 j& Q3 m8 Y' v" J6 H3 p" cdocument.write(
* W4 @+ T8 y. a; q$ c"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
$ E) s4 e5 U! v3 t;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
! V% y A0 M$ x. N( J7 @7 Z. S) s& }' f" a$ e' M
function showtip(text) //显示链接的说明8 ]' v! m8 {' n, r# |
{
# V, _/ R, v2 n: P6 N0 {( [! i if (document.all&&document.readyState=="complete") //针对IE' y2 g. n( P. Y
{
2 a+ w( m, j, [- h
" l. @: M. v3 u! t document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
' H7 U9 R' V k& h. u2 U! } document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;3 T" V6 z5 v8 J8 ]$ C
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;) L# Y1 a9 A( _0 q( H! Q
document.all.tooltip.style.visibility="visible";: a5 J$ }; W W$ b- C
}
! A0 l& f7 @5 @+ K1 p! e. Z}( [: l, h' N1 u6 b. F2 z1 m1 E P
& U$ t7 d1 K8 y( A1 D1 `8 f# _
function hidetip()
( y8 t3 h z- Y3 A{* \ y, N% H; X$ I
if (document.all)) f* {# d3 X4 N; n
document.all.tooltip.style.visibility="hidden";
+ T5 \) i( n, Y; L2 o}! [& Q; U! ?1 L7 R
, i; k$ j: W# {7 v6 [
function setcolor(fntcolor,bgcolor)+ O/ K8 W0 `9 o+ ~/ p# Z& B, [) y
{
' h! R3 t- ~' k4 e: e/ P document.all.tooltip.style.bgcolor=bgcolor;
: ^* ]. o; g. a& c( w$ `# U document.all.tooltip.innerHTML.Color = fntcolor;
% Y9 g2 `- I) ?. q- y& ^* f}
( s& c- E1 q3 B: ?
( j! J% U2 V% U& F& j0 bfunction showhint(text)$ D- R6 G; M& B" H. W/ m% [% q, r( F
{
$ F# O- L' @+ f, }6 `3 j onmousemove=showtip(text);3 z2 x; `/ C w9 F
onmouseover=showtip(text);8 I2 e5 O$ R* Z! s
onmouseout=hidetip();+ O+ y+ q1 u1 _3 \
}
8 h! B$ p( e4 Z</SCRIPT>5 l& [, V) b" `( k
) U4 C- B& H2 A0 _1 D6 ]
4 @$ i" ~4 U. A. e$ h6 b
) H" c, k' O( D$ Z6 S
% {/ K% h* ]( ^- ~) ]- C, h0 u, C* S0 k9 ]) W; Y- \
! y8 F$ L$ F0 C5 u9 E二：将下面的代码复制到〈BODY〉区
/ d! Z" x. p, D2 I; b) v; X<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
' G7 O% Q, {: l/ p! I; x9 N4 scellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
" s% N: ]# x) f. T0 f; H/ T4 Y4 K <tbody>
1 D5 _2 ^/ |9 ?$ }' y <tr align="center" bgcolor="#ffdfd0">
* L" Y9 H( z1 B, Z- D7 | ` <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
0 i5 x+ C$ C& t+ G: S; o: H target=_blank>赏心悦目</a></td>
+ l, N8 o6 J" j; w <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" - c$ r1 @4 ?( A8 W/ t' F3 d2 f
onMouseOut=hidetip()>网页素材</a></td> t/ }/ V" b& X) z2 q5 y
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() / _: k1 \- o7 {- j$ x
target=_blank>图像处理</a></td>! W" V' g: d8 i! x
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
# X! s9 N* }$ e6 g$ v/ U1 e) k target=_blank>网页特效</a></td>( ?1 _( Q. W; x
</tr>: M0 w0 R, ^+ G, O% I
</tbody>
1 `8 A1 F4 i! n' ?! [ </table> |
|
发表于 2008-1-21 20:52
|