|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
" h& S9 V$ i* ~2 a<SCRIPT language=javascript >
, ]3 u* x: E! T! `! E0 Mdocument.write() x' w1 {8 S6 H- `! }, K. Q5 p5 I- M
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\: ^+ S" h8 \3 f* P5 d5 H
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
# y# z) J2 {/ j% g/ c
# t$ _0 b+ T! T1 n7 G: {/ m. o. l! Ufunction showtip(text) //显示链接的说明% N, s. }# E, |
{: E; y, r x" v& r
if (document.all&&document.readyState=="complete") //针对IE- s& p1 A- S3 p: |, Z3 d
{
* \- k4 I0 `5 z$ l
1 p$ e; Q& `' J9 i) T document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
% i l* V) b. K# a0 O1 j7 C document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;: G0 K' ^- s& l* q, E: f
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
2 t3 F$ S( d1 U9 ? document.all.tooltip.style.visibility="visible";2 t) K" q" V; h U+ h d) W
}5 I" i w; Z. Y: m
}7 h! B; o0 ]" C' y) B. Z! Z. I: T
8 g9 P; K5 e9 G" `9 l) G
function hidetip()
/ N# z# S) s7 n( o( M' C7 g* d{& ]* s) v5 L1 ~9 d& I- B: h
if (document.all)
6 j1 i3 Q& h& o4 j document.all.tooltip.style.visibility="hidden";
M& R3 u3 b- _) P}
# B- o4 _2 S- k8 ^+ T
3 F* J, p9 V" b' Q3 _$ d4 {function setcolor(fntcolor,bgcolor)
+ S2 |2 q4 }* p+ q6 e{
, t1 u0 R2 U7 D8 M- S document.all.tooltip.style.bgcolor=bgcolor;
: f( C6 U/ v1 L I0 r document.all.tooltip.innerHTML.Color = fntcolor;/ V) f9 ^" U: M
}3 \/ z* ]: Y- F0 |8 o! e+ P9 O
5 _5 |% J' r5 t% Y
function showhint(text)$ p9 |: {; P* d1 c k# h
{
' s# m9 l* ]) q# H1 ^9 X onmousemove=showtip(text);9 b! y/ {1 w- T' N) Q5 P
onmouseover=showtip(text);
7 x3 C* r* |. A, z3 Q onmouseout=hidetip();9 P4 q6 k. R; X' J( z
}! ~$ s" c: a- n# ?! Y
</SCRIPT>
7 Z2 j- m( F0 z7 @6 D: C3 @( V8 R) o
! N Z- w! j+ m) W" i5 I
. C) T+ I! ?7 X9 C& p* y6 `
6 h |2 Q% q( W. O/ W$ P( ?# ?, C& Y4 Y3 Z
- k. P* \+ V) a# i0 s: a二：将下面的代码复制到〈BODY〉区
- r9 Y2 s8 O: N5 r<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 4 H1 ?5 ~- R' s- @
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">9 O9 }! O3 ]1 j7 x" y
<tbody>
; F* s" P7 M9 S$ T0 `4 W; o <tr align="center" bgcolor="#ffdfd0"> : k+ \9 a }6 f+ T: D4 t1 L# m
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
. i" T8 X3 w( |6 _ target=_blank>赏心悦目</a></td>
) o$ s' j9 c& Y2 l8 q# u! Y <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
' y% G8 c% g6 b% ^; s7 D) ~ onMouseOut=hidetip()>网页素材</a></td>
X. \" \* O- K+ q! y <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
5 J5 J* `8 X. w6 {% n+ c6 c target=_blank>图像处理</a></td>
O# B; Y8 g2 h" [ <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() - r# k* G2 S9 e% r
target=_blank>网页特效</a></td>
( S4 I# h' e: z: D: T </tr>
5 I( A. t2 c0 L% m+ O% o </tbody>
8 c0 C' n0 v' X- L* V </table> |
|
发表于 2008-1-21 20:52
|