|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
% E/ O6 ~/ }0 Y5 @/ b9 t8 z<SCRIPT language=javascript >, ~0 `3 ]6 K/ I N+ \
document.write(
, t5 V( P$ ] m& W: y- V$ ?"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
* ~: c" V/ O$ ]+ Y, e;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
! M2 w# l# o2 @
b* E) j* ~' T5 k, y/ v1 mfunction showtip(text) //显示链接的说明
$ v2 q7 l& v4 N9 p& f, v{
% m2 c- [& Z% C$ X4 G, g2 j if (document.all&&document.readyState=="complete") //针对IE! X" G- }* T3 p3 t5 c. d: O9 v
{1 X. g! {9 d4 R$ e
& c2 u, ~' b4 |) R" t, U- z% y document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";" h& T1 F- Z$ }" G% E3 u
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
7 I+ H# d. p; |$ u% x6 J document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;8 n$ i2 L- O9 b6 _1 X
document.all.tooltip.style.visibility="visible";
/ o9 m8 V. N! Y# a }
' X' j& L) s% |; q1 R# H}" [# s. o+ T9 B, X6 |
5 a% j, a, H! e7 f2 mfunction hidetip() 3 c) @$ P }2 w+ u4 M
{
/ k4 Y7 a" H6 ]/ |" Gif (document.all)8 J4 b7 _$ K) f5 U3 E
document.all.tooltip.style.visibility="hidden";' L, j' o) g1 C
}
# m" B; g' K( S( h9 q! ^- J
6 F" g0 ?4 f# c- v: n* F3 wfunction setcolor(fntcolor,bgcolor)8 H+ d! ^ C, ?2 ]; @: |
{
- o& C; Y* t& e) Q2 I document.all.tooltip.style.bgcolor=bgcolor;* S \! @. @3 k8 o$ S
document.all.tooltip.innerHTML.Color = fntcolor;! {( U' \, ]; ~$ M
}/ f. S O% Y& M8 W
4 J. `# ~% Y- a9 U: z& k* G# o. e; lfunction showhint(text): U i) k" ]( C! @, |
{
* {, N$ R* p0 Y5 X onmousemove=showtip(text);1 k. \+ r- E+ P- |0 q% t8 a
onmouseover=showtip(text);' x' ?7 Z1 d# U& g% k
onmouseout=hidetip(); c% q6 H* {. t2 r7 K
}
( b5 y3 _- H: {( X' X</SCRIPT>
' S( Q: m2 K6 W6 ?( n v& m3 k& W
3 ^% p/ `: n% w2 E9 z0 Z. @7 {
" w. x* P! H6 Q1 Y/ m+ c1 t9 G) {1 I+ H
2 C0 M% C! _' u6 Y3 F& o
* ~7 O: G G: c! r0 d
1 U4 `4 B! q, A9 O6 e# E8 Z二：将下面的代码复制到〈BODY〉区
9 n! ~8 m# p5 p7 q<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 # A9 C+ M- D* Z7 s" A) W* O, b
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
' l' F/ q1 I9 A3 q <tbody> ( i7 m6 ^: a$ k) ~! |
<tr align="center" bgcolor="#ffdfd0"> ( J9 t7 o; I5 Q; _
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
0 Z7 S( S% h' u target=_blank>赏心悦目</a></td>+ y- w+ D" d; E m
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" + X. A- u* L( u( r8 F5 [7 V# G
onMouseOut=hidetip()>网页素材</a></td>
" N; N' I( e! ^4 f5 i <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() ; B. B! r; r" c5 r) s) B( F+ i" d
target=_blank>图像处理</a></td>
, [8 @8 _4 P# b4 i. e <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 2 t) ~' l9 ^' ]
target=_blank>网页特效</a></td>
& o K" \+ [; S A* T- t8 Q </tr>
9 O5 c) R* P! e& u( Y% x </tbody>
4 [; F7 q% L4 y7 B6 \2 }+ d </table> |
|
发表于 2008-1-21 20:52
|