|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间 S2 I% m+ y5 N/ h$ V5 P( a- X
<SCRIPT language=javascript >
* V5 _) J/ n1 {* r! x% t* H2 ?document.write($ U' V4 O1 L }0 z* _. C
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
3 v" A% Z) a* I1 d T9 E;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
9 ?1 A, Z% H" E& _! [, K8 q- W" y9 {; y
function showtip(text) //显示链接的说明; W7 E$ w3 X( D* d& ?
{
+ m$ n0 Y5 m' k( |/ F# S/ z if (document.all&&document.readyState=="complete") //针对IE
+ Y+ y/ k; ?# @* l& e% e# P {
# W6 Z6 F! x6 U- a - J! r( X, s- n: ~% H) S9 r
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
( u1 C/ R2 K! ] document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
/ Z! h5 a; w2 p3 A* w1 c document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;% b* q- K0 _: E8 K& W5 w
document.all.tooltip.style.visibility="visible";
+ R. \ b# {; L8 i6 ?4 u9 T, [9 V }
`3 t9 P* s# M) o}
- \) a/ z$ @2 e5 L+ Y! `# v0 m
( e6 I1 P" K' o% M4 X; k" _function hidetip() 7 m2 {/ X" ?! H2 T3 m3 K
{
; P( v0 r$ H0 w) nif (document.all)" ~; ]1 Y& Z* j2 S
document.all.tooltip.style.visibility="hidden";, o- r9 ~5 s. O) B8 ?
}
/ I# t9 ]- Y) o- U- P' O: ~3 H, I. z
function setcolor(fntcolor,bgcolor)
- A3 j- e4 x" E- s; F' o ]{9 }0 i0 n9 Y. I* J8 F5 V
document.all.tooltip.style.bgcolor=bgcolor;7 ?( O# S$ | ~' c; e" }9 j
document.all.tooltip.innerHTML.Color = fntcolor;: X; \& L' N5 v9 O! T
}' c6 G& `4 c0 |) J- M$ s9 u
; U; A- i* B& Y5 p) n3 e1 a6 nfunction showhint(text)
+ i' C: N8 v0 G( B1 Z{0 G1 G8 z( F G% x% a# D% ^& P2 h
onmousemove=showtip(text);( i0 B t" r' K( L) Y4 T0 m9 S9 N
onmouseover=showtip(text);: K3 l0 g* q- J( J: k
onmouseout=hidetip();- A1 s% _$ B( S9 w( |) [
}
' s- M5 g5 _0 a8 D</SCRIPT>
( Y) g; C. N+ D }
/ q' f- F0 X& N' q7 v+ O% r; D( z! n8 B) `$ L
# w5 R: K2 O! V$ q$ I( s9 O+ i& o$ Q7 q$ K9 T9 v7 z
. z5 q0 D$ R8 y, c- A% C. V4 m4 Q4 z. ] Q$ X4 i, m4 L
二：将下面的代码复制到〈BODY〉区
# x, `( T2 n9 R# \* C<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
/ X7 _. k9 T8 h/ gcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0"> [8 ?) O! f+ Z4 Z# t# P
<tbody> 5 n( V) d6 |7 s4 b
<tr align="center" bgcolor="#ffdfd0"> ' W! `6 _" {2 M' Y% N; H' h
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
: l2 V9 F- d. j' o3 U9 N target=_blank>赏心悦目</a></td>
1 n5 v' X) y# P0 T i <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
2 a2 f4 ?/ j4 j onMouseOut=hidetip()>网页素材</a></td>! X9 b# T+ o u
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
6 D" g9 O% c1 m4 t target=_blank>图像处理</a></td>9 z4 x0 K/ m$ I+ y$ E: y5 q" J
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
. Y! b1 S/ S7 V1 N target=_blank>网页特效</a></td>
$ T! }; d. Z0 @% x, W- D6 n3 i </tr>
$ Q' B0 [4 J4 X </tbody>
/ v3 p$ I; d9 Q </table> |
|
发表于 2008-1-21 20:52
|