标题:
网页之带注释的表格菜单特效
[打印本页]
作者:
zw2004
时间:
2008-1-21 20:52
标题:
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
: O0 K0 w" e9 F' I5 b
<SCRIPT language=javascript >
, X' }1 P7 e- `
document.write(
& D) H( d5 `7 D$ @% c6 ]
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
2 W' p0 V% p+ G2 V" S" y0 E) i% ? g
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
$ C' O# h( b# S! q
5 ^0 T" n2 m( T# W, g
function showtip(text) //显示链接的说明
# x7 g3 L$ C1 W b7 [6 g
{
1 _" @8 n& u0 n; R. `
if (document.all&&document.readyState=="complete") //针对IE
0 m& ^$ G8 \9 u+ [" }$ w6 _
{
. V" W2 O9 X& [8 o0 Q
# ?2 e9 V' v" q% M% C
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
9 R5 v2 T6 [9 x* _
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
% L S R" N% M3 @& S ` }5 k
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
`, R. q; J, _% T
document.all.tooltip.style.visibility="visible";
6 i5 D8 a1 J3 v
}
: _9 m6 I! V1 @$ p: T
}
/ Z; s& i# S& l1 ~+ o
2 ^( ~% v' H' J2 Z5 M5 Z2 ~4 ^
function hidetip()
0 o4 A0 ]) k4 {/ A, g
{
1 R, S( I" }/ P
if (document.all)
/ J' ?# h6 }6 x) `) v, R
document.all.tooltip.style.visibility="hidden";
: `# a8 U! N* p6 {+ t( ^* N9 P1 G
}
* W1 S, a4 Y0 d. ?
% u3 W( Z" y7 G4 {: Z2 }
function setcolor(fntcolor,bgcolor)
. o0 u4 N$ M4 B4 x8 Y0 R* K
{
4 E; p# ?4 f. v6 J; V# g
document.all.tooltip.style.bgcolor=bgcolor;
4 @" J! {4 ]- {
document.all.tooltip.innerHTML.Color = fntcolor;
( ]. M C8 g6 h' r4 A5 j
}
( |; w' A, S: s2 J: n3 I* |
. ?; L3 w$ t' @
function showhint(text)
8 A# F5 E. Q4 d+ G2 _! I
{
& N/ K! e& Q, y
onmousemove=showtip(text);
! K5 ]1 {6 L! {. y b
onmouseover=showtip(text);
! r0 B& [) E1 F" }1 q% l
onmouseout=hidetip();
- @9 [2 C1 X+ j% U% \' W+ } i
}
+ T6 U4 _" D) P/ w5 j- D5 o
</SCRIPT>
: ~% I" Y. d& I
% G1 ^% I7 m% U9 [- G9 j2 A
6 G8 f& E6 i# g$ W: i+ u# p% P4 o: F7 t
0 m5 O" j( u" _! @
4 i5 O4 p4 u8 ^- s$ t4 s$ ^$ ~
- r" D7 [7 J* Y. M8 |
) O/ N% {8 \9 P
二：将下面的代码复制到〈BODY〉区
# E4 q% I b2 S! L# R
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
, k5 K, z6 e' n
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
& Q$ k1 b5 c: m$ W$ t4 K
<tbody>
/ `1 L" a' Z4 L9 ^
<tr align="center" bgcolor="#ffdfd0">
, ?7 I1 z! X+ q, m$ x
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
& {- }/ J6 s0 p: F: E. ~
target=_blank>赏心悦目</a></td>
( J1 T- D- ?8 w, O4 Q2 z& q+ `
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
+ }1 L( |9 ^: `+ r9 ?9 d$ _
onMouseOut=hidetip()>网页素材</a></td>
$ G1 Z, I/ Q% K* Z# j
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
+ C+ u, P$ w8 K4 S) K7 j
target=_blank>图像处理</a></td>
4 s3 h$ H# s' h2 o$ l; ]- I; i$ C
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
& t1 [: b- g7 U0 i
target=_blank>网页特效</a></td>
, O) j) B" w9 z8 d8 _& m: c& K: M) L$ Z
</tr>
' ~: K6 O* V+ \2 X+ o8 g. w6 Q
</tbody>
1 K% J9 w( j( t8 F, \8 p# l7 x
</table>
欢迎光临 捌玖网络工作室 (http://www.89w.org/)
Powered by Discuz! 7.2
