|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间& [/ k6 x5 y% T% Z" k$ @
<SCRIPT language=javascript >& c# m# o2 }! k3 ^( v- Y
document.write(1 m: Q& P% C. H O$ A6 i k! n: m
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\8 w. |" k3 X8 F. K/ @5 N5 L
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");2 {/ W8 N4 `( i+ S& ~5 J+ K
- r7 z+ u# _$ {function showtip(text) //显示链接的说明
3 A7 e% m t8 E/ `' f! l u{
5 e& d2 ~* ?9 ?- c$ _ if (document.all&&document.readyState=="complete") //针对IE5 x8 s5 A& m8 {2 P1 B, L @
{3 M& K' _8 w+ `7 d; p: m2 D( y2 E6 e
/ |0 e! ]7 t# `+ a- ]/ [7 v" G: H( V
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
y. w+ o6 P1 g0 ^+ Q: h document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
* G# F3 v& c/ [3 L' y6 @( [ document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;; H( {5 y% e) x; }+ k4 ?
document.all.tooltip.style.visibility="visible";
5 |6 ^; F. q" b7 v- Q- k6 H }* J4 U3 \: K" I; i
}
8 w: j9 S q6 H" }- e6 k
- Z. I' }; ?/ N% _7 j+ `# w2 wfunction hidetip()
! C" V4 S8 M4 j# `- G$ G{( s8 F1 t' U# n0 ^7 T p
if (document.all)7 M# ?& ?$ M( b; g# _5 K
document.all.tooltip.style.visibility="hidden";
; G. i( l3 T+ l0 @1 z# e}
. f/ Q" `2 A% a+ `$ V% \3 p' r3 F
9 q& [' z6 d! e0 j9 A2 Ofunction setcolor(fntcolor,bgcolor)
8 _% p+ b _! J. A' s# O0 O/ p{
% i4 T, k8 B: |% h+ ? document.all.tooltip.style.bgcolor=bgcolor;
! d) o; o) g$ x) R$ M$ R. I' K3 g J document.all.tooltip.innerHTML.Color = fntcolor;
/ c. @6 N# A( M}
+ h0 ?: Y% u+ v
/ a7 R3 i/ T: w$ r8 R; Vfunction showhint(text)
3 q: l2 {, B/ X: F' N1 l{* |3 y/ A- g# ]& L" p# e+ n
onmousemove=showtip(text);
1 Z A# y0 R: E, q& ^0 h% r onmouseover=showtip(text);
8 j9 i: Q$ e) L% c( u0 z% { onmouseout=hidetip(); @" o B) h, D
}
2 E$ G9 [( V. n6 @( ]</SCRIPT>* ]7 @4 A% G9 u" ~6 U5 O0 T; n. c
* P& r7 }/ {( f0 r$ B8 x2 M% W; B O- V# H6 q* a" Y& x" o- `
5 T# z2 |; C, t5 \/ ^1 D. w, @, C
3 W) R. G* {. p7 Q) v+ v. _+ F8 Z0 L
( U) o; \' f2 `
; O: o @* R: r; w, z; Y二：将下面的代码复制到〈BODY〉区" d j8 |( n; ~! i/ A* [3 H
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 5 |4 D+ X1 z! Q. ~
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">8 \, m$ D# f/ Z. f9 _
<tbody> r$ a2 Q- h- D9 S
<tr align="center" bgcolor="#ffdfd0"> ) G1 e- G/ `( K7 Q. i: j6 Q
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
4 |& U: w% D7 [! H. f8 d target=_blank>赏心悦目</a></td>$ l- O* b' j2 q6 J j+ e. [: O- K
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
1 F5 t- m! `$ L, ] onMouseOut=hidetip()>网页素材</a></td>
( G/ g3 S' B7 l2 p3 O, C <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
. ~2 R+ n) m9 E, E' `' x target=_blank>图像处理</a></td>; L2 z! Z; Q; v9 {
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
6 V% p; g& g: D3 f1 `: S) D target=_blank>网页特效</a></td>
# \' P6 T' g6 P* t3 S% R </tr>0 Q+ o" m0 ^3 f; d% Q2 L5 C5 e" D
</tbody>
, E* |3 m! _8 _7 ^ </table> |
|
发表于 2008-1-21 20:52
|