|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
7 a6 ?$ W. A+ e) D% L% Z+ M<SCRIPT language=javascript >
' j6 w+ q5 u4 G( w; X6 U& x% Ndocument.write(8 x. u3 v' e7 G. [& \2 R7 f2 L- o
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
% H3 |% u2 ?3 G0 W; P;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");1 U& P+ h" `) ]' u7 d
! p$ C" P; f, ~# J
function showtip(text) //显示链接的说明
* W# h3 E' X6 L/ u8 }{
/ R2 b/ C4 d0 n3 V, C0 p5 o if (document.all&&document.readyState=="complete") //针对IE4 L; d- m0 u4 e; d6 i; R
{' X. S6 }7 }9 j$ I
6 U8 f" j0 t& ~ d+ H document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";6 v P' w, U9 [* Z
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;' [4 v& ~* ]; S' `; p6 j e
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;% E% I3 B* Z; ^$ @. _% r/ O
document.all.tooltip.style.visibility="visible";
& m/ W; s }7 T2 d2 |- h5 ? }
8 }4 T' v% s$ R; G1 W) U3 T: [5 o}% f0 e* _8 b' W2 F3 \. `$ a# z$ d
' ^; {% D; G, _2 yfunction hidetip() - U1 k/ a3 U: f8 d7 ]
{" _6 j! E7 n" D! ]" K9 ~7 U
if (document.all)
: ?6 ]1 R- g8 c7 U5 r document.all.tooltip.style.visibility="hidden";5 c1 f3 y! V; n- |: q7 O2 E
}7 ]0 B; o0 M4 ]3 G, J
1 Z$ c" i& j" ?) t& m% I0 Cfunction setcolor(fntcolor,bgcolor)5 N. d" F+ r- K9 }
{
% ]. i" h f0 X ] document.all.tooltip.style.bgcolor=bgcolor;
! x" `8 G' ?2 R, _( R" l G0 A& M% f: w document.all.tooltip.innerHTML.Color = fntcolor;/ H- b4 I3 W; Z: P- J4 Z$ ]
}2 ?( U0 f: I0 a% [
0 K$ F* t- W5 l' R% e7 a$ ~function showhint(text) c: r$ q: B+ Z4 _
{# n- z5 `0 a' B7 u; C1 m
onmousemove=showtip(text);
4 j$ k) h' s# L0 @3 Q0 e; t8 o onmouseover=showtip(text);$ S2 D8 `2 v0 v
onmouseout=hidetip();+ K7 }9 T- t8 g& e2 U* H
}) t/ m( @, a' d* f1 L" ~8 ]
</SCRIPT>* t5 q% p. `* T
+ W' h* j. I, o, H( F
, D& i* s* l1 W5 `5 n! m& Y/ i* k2 p: f( V' o1 q' K9 N
7 m0 E( p$ N/ `0 K
' c1 s1 L+ J+ {' M
3 G) q" V0 f; H9 m0 ^/ U m二：将下面的代码复制到〈BODY〉区
8 p* @0 a9 k5 y9 G<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 ; h0 i. L. d2 N, c4 N6 E
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
: M, U" Z9 t3 J! T! h, d7 [$ z) @ <tbody> 5 [2 Y" J2 m$ e+ c3 }, A8 g
<tr align="center" bgcolor="#ffdfd0">
! O( \- J8 B& Y- l; {, } <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
0 [" |& y4 f$ u! X% I- w. m target=_blank>赏心悦目</a></td>
" U$ @2 D d: O <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
, t( A, u V/ g0 b% m onMouseOut=hidetip()>网页素材</a></td>
7 z) e) F8 W8 C$ W* O4 n <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() # ` V5 e, |! r( w
target=_blank>图像处理</a></td>
6 C2 l; V! W! ~2 \ <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() ! V" f, U! x1 o; ~
target=_blank>网页特效</a></td>
_$ P9 G3 J5 U' E3 w+ t3 T/ h </tr>- o+ v5 r; t3 z7 C3 X
</tbody> 0 a- m) y+ _# P7 A/ m/ E; N& a
</table> |
|
发表于 2008-1-21 20:52
|