|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
% ^5 I' h, e1 [* v! ]<SCRIPT language=javascript >- P1 t( [- m+ c5 ?2 D7 [
document.write(2 s4 B! P* @5 d# X m! w) M2 |
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\ M1 {4 P9 _& j+ h0 |
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
' M6 @# n% v( M! [+ }. J2 ~' f* G, @/ {4 K1 z
function showtip(text) //显示链接的说明- f6 g" i I% p; |4 n2 v: e
{! P% h1 w' m% r/ F9 Z) v
if (document.all&&document.readyState=="complete") //针对IE8 U* T1 o: ]% x, {( _' k2 | b
{- W( ~6 i$ ?- i6 r% R& X: N
, k% _5 R" t( h7 p0 H; y4 v3 S
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
- c$ g M+ P* y& i q- @ document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;( A6 J6 d9 Z+ W1 k
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
c0 J8 x9 L4 b9 J4 Z$ G document.all.tooltip.style.visibility="visible";
1 ?2 i/ j; g% z3 l7 l8 U }
( J1 p1 ~- ~. G}6 _4 y, P, f+ I0 _3 O; U/ C
6 v4 Z) P; `0 j6 ]4 w7 C" jfunction hidetip() J8 E! @7 e( x
{5 _; `9 b+ C0 o) n% T& ^& y! K
if (document.all)
- X( m: n3 ~9 t% ?9 `9 L; A document.all.tooltip.style.visibility="hidden";
) h N% i' F4 @! d}
I" P) a' d d( `! v
# L& l' w u. Ffunction setcolor(fntcolor,bgcolor)' m5 N0 L3 c# d2 M8 V' S& Q4 n' O/ j
{
$ e$ V( g- x1 M/ i document.all.tooltip.style.bgcolor=bgcolor;0 B" _' @! y0 w
document.all.tooltip.innerHTML.Color = fntcolor;/ N7 h: I: H6 ~3 _/ H
}) C5 m5 V5 ?- e2 K- c4 {
* @* B9 N/ K# B& m' L9 tfunction showhint(text)
$ l) @8 ?7 ]9 n/ y, y: h{
& w$ i* s/ M) }( u onmousemove=showtip(text);
! V% ?0 R* }" b6 ^+ c onmouseover=showtip(text);' C; l2 `0 L# ^+ _8 q5 w8 H
onmouseout=hidetip(); i+ P9 x- J) H! v
}5 I$ l8 M% p" ]& B. I
</SCRIPT>5 l; z8 u0 S6 a5 r
. s$ z5 s% _- u* \6 q+ p5 g) @9 q
% t9 N7 ? V0 d% e9 a4 W. \& z s* L( j. y
- K0 m' k. J' x' R% H# P
% N; y& G, \. k" Q4 x) q
" [) }4 d: P! i& Z7 u. f9 O二：将下面的代码复制到〈BODY〉区
0 _* A+ l/ r: i# |# k, o<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 8 B# ?3 s9 Z; N/ k6 R( W
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
4 r* h, k- _2 b5 Q9 M" p <tbody> ) @( [4 L/ U9 y7 N7 B4 I2 h5 y- H
<tr align="center" bgcolor="#ffdfd0"> ! I7 M6 p0 Y6 Z" P9 b
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
: \+ b }- A/ P, Z- h9 d8 F target=_blank>赏心悦目</a></td>
$ F: R5 C0 \6 Y Y <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
. ^& Y2 q5 Z8 c onMouseOut=hidetip()>网页素材</a></td>- R0 E- j) N C& Q, _- u
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() $ D' ]8 F. \5 @2 B \+ \) W* Y
target=_blank>图像处理</a></td>6 `$ J9 _* [# q( e1 A# H
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 6 M9 } g0 Q; Y% u \! Q
target=_blank>网页特效</a></td>
4 X; H8 {# |7 h; G& M/ s1 y6 p </tr>; T; B, x7 y2 P2 X
</tbody> ' ?5 d) t! {5 _ V- g0 J6 h1 o
</table> |
|
发表于 2008-1-21 20:52
|