|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间 `. |0 w H/ c5 L
<SCRIPT language=javascript >2 H; y% }! ?) b- l. B1 V; Q
document.write(
1 z- s$ {& i- Q& A, R3 f& s"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
, A/ j+ q: g8 N8 X$ ]6 G;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
7 D3 f9 n$ j+ j8 W) t5 b4 o6 Z! j5 s# P; X& i
function showtip(text) //显示链接的说明 j2 a6 {' y* s( F$ l
{
: s! D3 }" ]9 r1 i7 I% A/ A if (document.all&&document.readyState=="complete") //针对IE) D7 l: N- h, a$ A7 C- ~; C
{
1 q$ H1 N% L1 r( N* q0 I& z+ w * G# s) M3 l+ k& H
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";3 k+ R- ~6 T0 M# {
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;- Z2 ?; P: `7 a- V7 Z
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;7 Z) N- t% N$ j3 H1 D# V2 D
document.all.tooltip.style.visibility="visible";2 w& k8 h# b) \5 ^3 ?# J
}5 T# a" Q4 |# w: L& h, |7 |6 n2 K
}
# z1 [/ Y9 O0 H3 J- m1 X7 F' H/ D9 L1 l! B* E
function hidetip()
( [$ E# y, w2 ?. t& z+ c4 R{/ J" F7 B/ B J) D) X* i- A
if (document.all)2 \# Q1 p" `' D2 `
document.all.tooltip.style.visibility="hidden";' c% g. G' |6 f5 ~4 I$ E& _2 T
}
0 x. |) T! N6 e! i# C/ z' C2 r- |/ k: W1 G
function setcolor(fntcolor,bgcolor)7 v8 V9 Y* v2 V# s/ @& v# l
{
5 B/ t( Y$ N, E6 u# a6 b document.all.tooltip.style.bgcolor=bgcolor;
1 S# |! p% e4 | document.all.tooltip.innerHTML.Color = fntcolor;
2 {8 G9 z/ t5 M+ j9 n4 H y}9 _5 S% F' u8 \& B" e
# {( A$ d# c$ R6 U" `( r
function showhint(text)
. s: s0 M% s7 R [{
! Q0 s2 l, C1 }% z( I, ^! t onmousemove=showtip(text);: z) a" k) @7 f! s' q9 Y. a
onmouseover=showtip(text);
: K4 E5 X4 r: V0 m3 _. s- p' e: j onmouseout=hidetip();& `- m7 G, A& J! q
}- V; C! `8 C7 F4 g# F, u
</SCRIPT>
6 ~6 Y% A* w' \! ?( o$ t+ ^6 G
# X8 U/ A; r0 `; \0 ?% ^* }: b, R' ~. g/ \/ Y4 F) ~1 P t
9 {4 X/ w& l, n& X V W
) _, N; w' l# O5 n
! R1 l3 {! e5 ?5 N# K3 _/ o8 Q9 g# i y, Q; L: M6 M6 b
二：将下面的代码复制到〈BODY〉区
! h0 H. g' u+ m4 X" U+ M/ z7 L<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 " N, V* r9 Q: p
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
8 o0 h8 |: t+ D8 R9 ~5 z <tbody>
/ T' U( u- e, Y" Q! D <tr align="center" bgcolor="#ffdfd0"> ! W# O# ?- v' R1 [ y/ c
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
1 U- G; ~& W' d, o' p target=_blank>赏心悦目</a></td>
6 C' K' Q8 Q F p5 W2 C0 h, _ <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" % |% t% m- I. N( V
onMouseOut=hidetip()>网页素材</a></td># T8 i. W( h: D4 {3 N' f4 D8 F
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
5 s0 K I+ T# a% a2 H& y target=_blank>图像处理</a></td>
4 f5 D# N) U% P- D! x <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
3 X5 q- O( s. W% w* x0 E, N target=_blank>网页特效</a></td>; r+ V& x8 I7 `
</tr>5 v; { j' E4 n2 u- g
</tbody>
0 Y x5 H/ b$ V0 o3 A. | </table> |
|
发表于 2008-1-21 20:52
|