|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间, J; L4 ?! y# K
<SCRIPT language=javascript >
% u& ~% N) ?/ p8 m! Pdocument.write(
6 S7 M+ @8 i! b$ W"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\- Q, f( x0 l" C9 {
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
, ]+ E. Y+ y# d2 r
( m4 j5 s, [. K* i; e# x K8 {function showtip(text) //显示链接的说明6 n9 u6 G: ^& h; p- a* y+ n+ e
{
C- H1 i0 \4 v3 R3 l2 Q if (document.all&&document.readyState=="complete") //针对IE
4 z$ d# e" t/ V% O4 N( Z {
% [7 Q# R' o- Q4 u2 m ' J% ?2 ~ Q2 e4 K7 j- m
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
, N5 a5 c. I3 t( L) K document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;4 N. f! R" h8 N
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;6 ^* |' w, \: m3 n* V
document.all.tooltip.style.visibility="visible";, l, l: b1 C3 e' z. D; u% Z
}
5 r3 G' s% o' t, `% b& o" D* ^) @}* c( \$ O9 a+ h7 {* w4 u' o6 P
3 S$ g9 u! t8 M6 n
function hidetip() 1 a3 x$ E7 Z$ h7 n9 y: i$ \
{
3 u$ ?1 t* `+ C/ w: D7 Hif (document.all)
3 e8 S* Y; N! ^1 ~' A' J5 ?; F document.all.tooltip.style.visibility="hidden";
% n7 A7 |6 m8 I& l4 b' `}% ?$ p6 U8 D! D+ `7 }
! |2 K' B% d/ Z( l3 O, ifunction setcolor(fntcolor,bgcolor)
7 r( k. C% }3 Z{. L2 i* X' ~$ g- i
document.all.tooltip.style.bgcolor=bgcolor;: q5 G# O T6 B6 Q1 |4 H$ p6 V- O
document.all.tooltip.innerHTML.Color = fntcolor;( S% J6 m7 O0 C# M& F7 R
}, x) t2 H! }3 o* N! z
) J4 I% G$ M2 f- @
function showhint(text)1 s S( e; G4 f6 u* I5 H& _ [
{
* ~6 N- k, W* Z3 P7 A onmousemove=showtip(text);
. H% X9 v- _" L, c onmouseover=showtip(text);4 V, P+ M! o% }* } I$ A
onmouseout=hidetip();
7 S5 e+ A* B$ z) B) w2 e}1 d) l1 B: E8 p- x5 t. D
</SCRIPT>' E# _+ v. r ^' z
- J5 O; }& U. X8 e0 `
& U( G" A2 g' P4 M% [2 y4 H- a7 a/ d7 a! {% K- ]2 Y
# d" Q7 l) G0 h+ \0 G ]9 ~6 ]& v
" X# Z/ ]0 \. O
2 G# z) o. `7 |: D7 _
二：将下面的代码复制到〈BODY〉区
5 v( E4 d9 E, h$ r<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
$ B; p+ R. ^0 K6 H, G5 a# a. ^cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
& u$ }6 l1 W r& ]" }, D% r <tbody> : Y( q* ~) z9 H% i7 z( M
<tr align="center" bgcolor="#ffdfd0">
$ J/ K5 m. T/ S: s+ g' s <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
; J& d0 [! L# M3 k- Z3 y target=_blank>赏心悦目</a></td>4 }8 L* B7 q6 E) j% C% Z! l* D
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" 7 ?# B0 N. N- N+ M
onMouseOut=hidetip()>网页素材</a></td>" Q$ x6 H! g0 i) d6 q
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() " a/ H$ i8 R& p) P
target=_blank>图像处理</a></td>
7 [6 y, K& d3 R9 j3 O6 R/ H& Q <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
' L6 u( N( W/ B0 l) k3 t& a/ y target=_blank>网页特效</a></td>, j, b+ t+ `2 } o4 ?3 _' _
</tr>
! W7 Z! q2 Q4 f/ T" w( a6 M </tbody>
, ?, m+ z. ]( u/ ?7 f! E </table> |
|
发表于 2008-1-21 20:52
|