|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
. Q9 M' B" P \. z<SCRIPT language=javascript >
! o5 M6 ], c6 z( X0 f* Sdocument.write(
9 A5 R6 y" P8 D4 K1 M x"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
, o4 V' l8 n) a* j; m; q q;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
$ L# e( E. y: ?( K7 N
0 J4 R7 P. Y" ^$ ofunction showtip(text) //显示链接的说明
4 w$ ^! K* ~& Q' F6 R$ G{6 q* F+ g3 q& |2 h
if (document.all&&document.readyState=="complete") //针对IE* m1 h ?: [% C9 m! g# R) r$ t8 F% V3 E
{
9 L+ |4 Y* w, |) x. b j 5 d: E1 _1 J1 \: v
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";! S. r9 l) P' K% d
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
7 _3 C0 S' h- f# B5 e, [. D2 [ document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
3 L+ C) e( G$ }8 J document.all.tooltip.style.visibility="visible";
- }; z& g4 p( [0 r& ]* n { }
; r( F, n0 p- {( G" p% H; ~}; A5 x0 C9 F: J* O) W
1 c; D/ _5 q4 f3 ?/ X e z
function hidetip()
" F0 t# M: J$ L. s! l1 ^3 s! `{- M1 O8 ]! e! m( @
if (document.all)$ |% W2 Q8 I2 @6 e8 X
document.all.tooltip.style.visibility="hidden";
~! \$ F3 R5 g& U+ M0 _4 g* ~; L}! ~1 l0 t2 N5 ]" y1 j
; x* I! ~+ `$ [4 ?, z! ]# ~function setcolor(fntcolor,bgcolor)' ~6 k/ k6 X3 E& a
{9 _+ K/ F4 y3 g/ i
document.all.tooltip.style.bgcolor=bgcolor;
$ I: d1 T1 R' K+ Y' s8 R document.all.tooltip.innerHTML.Color = fntcolor;
, z ^ s k( s- \# @/ H}6 T4 R% O5 B0 |% K
$ U2 o* q8 f1 f. y! k# Z; |
function showhint(text)6 q, P$ r$ D% u
{
$ k& r; e: C% @8 q' g2 M4 s onmousemove=showtip(text);. r' Q+ ~; q( G& J* T& }8 b# a3 Z
onmouseover=showtip(text);5 c: \9 e0 { X( f7 |
onmouseout=hidetip();. C+ P! R4 w9 X# s( w, t# p0 i
}, u1 P2 e1 d& n, h% F
</SCRIPT>4 y3 F( R+ L" ]' y
( \) J' r4 N9 t& N. |5 f+ p
& g# G2 ?, L' M& b' }3 c
$ D7 @ k' s1 W$ Z$ s4 Z* a7 x0 T7 {7 L; C
; ^7 D# ?/ q% D; G. Y
2 k7 D( Y6 M1 m. y& I2 E4 g二：将下面的代码复制到〈BODY〉区
5 d1 k, J# n5 [: \. e<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
/ s# W/ D4 M- |. C2 t$ ~cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
! h0 J) z2 H, {8 J) Z <tbody> ) Z) a/ L( |' K, g0 }
<tr align="center" bgcolor="#ffdfd0"> : a5 l7 S2 f& U, [2 l
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
2 G/ [' n N2 E! x3 ] @ target=_blank>赏心悦目</a></td>' Z3 }9 f3 M8 E" v r3 T
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" 1 q m7 q$ Y5 l" d) P, J8 D, N
onMouseOut=hidetip()>网页素材</a></td>: h9 }4 I2 s: O; q
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
^8 L* D% Y" a$ m" W' e target=_blank>图像处理</a></td>
. F: L s' B$ N8 G3 d; } <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
+ y* w6 K3 M+ [$ d) R target=_blank>网页特效</a></td>0 h- h: d* i# p, x* F
</tr>0 w/ O+ f0 ?& J+ x2 O$ l4 w
</tbody>
3 r2 \6 `$ S0 K4 f$ k </table> |
|
发表于 2008-1-21 20:52
|