|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间' _+ B( `$ H) I) Z L5 y: J X B
<SCRIPT language=javascript > ^9 V% X. C e0 [4 r
document.write(* P C! u4 E# [4 E) V
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
6 y6 ]' \7 `$ `9 _" Z;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
8 B; @* w1 K$ v. _1 R5 {9 j: D+ Y& I! e
function showtip(text) //显示链接的说明' n8 a, t7 x0 P; j$ v8 ~. |
{
: O i; L/ l1 t if (document.all&&document.readyState=="complete") //针对IE+ F" m9 B* o% Z9 @" l
{+ e. [8 H; |( k% J0 ?; ^
9 h4 H u( C5 \) i0 K: W& v; R3 k) c
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";/ C/ n& I& J a. i: e
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;! H; v$ C% r! w9 j9 L. t3 J" P
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
/ J/ S, y& a8 q8 l0 V document.all.tooltip.style.visibility="visible";% J. d1 ^; ~4 V# l) D# O* u: K. u, N
}" Y6 s, P# `, `" L @
}, w. n& J. @7 U, V- t
" ]" W/ ~! M3 T* o
function hidetip()
4 X* |- m$ ~- D9 j. H v6 N{; g4 U" |8 G. c. N+ i0 W$ Z* {
if (document.all)
Z- W @9 r" A1 z+ ~" Y& P. ] document.all.tooltip.style.visibility="hidden";# a# a2 }: I( t7 n0 U
}
. h9 ~1 L$ a, | A" Z
& ^+ n" a5 _4 H' hfunction setcolor(fntcolor,bgcolor)
- t! l, A( L: t8 }- \5 y{: q# d5 F! G/ z6 y B" M% O' e
document.all.tooltip.style.bgcolor=bgcolor;4 r3 M# n' K" r
document.all.tooltip.innerHTML.Color = fntcolor;
) f2 f# P7 v- s, l6 J3 d}" o6 c' ?- v5 [& m
5 O, k6 {/ t5 [; U$ b- `8 e
function showhint(text)& B5 t0 u5 I; T F: r
{" L" Y! ]3 \- J. S
onmousemove=showtip(text);( C Q. g/ ?: E5 \: n% O3 B3 N
onmouseover=showtip(text);
/ y" E. i# I( y6 Z0 H9 ` onmouseout=hidetip();
" G# l- ~$ e5 i* T}2 x, u$ ]8 d) }% s5 K r
</SCRIPT>6 J' z9 ?2 n% Z; ], B7 l* f
- c; H5 V( w$ L$ d g7 M6 f
) @% }' I2 I# U% y) C+ b1 T% d, n! V/ s& T) _/ Z$ _
, Q# q) G U; t8 E# ^
0 G1 E8 {$ I* l6 l: C' |
2 r2 h0 P2 m% D9 j) M" V4 c- u二：将下面的代码复制到〈BODY〉区 q' N6 C& o8 ]$ t, o$ q3 ^
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 . o$ h8 S& a2 E" c- t* a
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">0 o) i% ]1 n0 R: o. T
<tbody> % c3 [/ R: a, A p( t
<tr align="center" bgcolor="#ffdfd0">
9 R9 ^$ f ?: b0 [ <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() # q' j3 O$ G8 u" a" I6 L
target=_blank>赏心悦目</a></td>
0 |8 W# [6 |3 P3 w5 E4 b& \9 I <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" ! u2 k1 u, ~' D1 X1 z3 w
onMouseOut=hidetip()>网页素材</a></td>
' C" \* y6 Q9 S; B6 o <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
5 G( G# j2 V6 b$ u0 w target=_blank>图像处理</a></td>/ Q2 r+ R- o8 i: Q9 {: [: u- z; ^
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
! w- I% [2 m" G. V' E target=_blank>网页特效</a></td>
% Z s3 W( l3 f) R# n0 J </tr>
1 `) i8 x) H8 a/ U4 E; B </tbody>
% g, h7 I( f+ N+ e </table> |
|
发表于 2008-1-21 20:52
|