标题:
网页之带注释的表格菜单特效
[打印本页]
作者:
zw2004
时间:
2008-1-21 20:52
标题:
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
2 R+ Q% @* ^3 {1 m! l
<SCRIPT language=javascript >
w: B8 f) s, E# Q
document.write(
% `* O4 g- z% P! I6 N B9 x
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
. T4 ]' j# f* U5 q- l7 m0 i
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
4 o5 O% l9 a2 i" D$ H8 \
) E" k" J. x1 V/ ?4 T
function showtip(text) //显示链接的说明
# n+ h+ d! R7 r5 `0 @7 u8 A* X1 J
{
9 m1 x' b6 z8 G# m5 N
if (document.all&&document.readyState=="complete") //针对IE
# U2 ^1 Y* L- [
{
: l4 @+ O0 v* n0 j, ^$ N& h" b
7 o9 J) x! K% u8 F
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
$ u' d7 L* i% _1 d: X& j, V! K
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
! |1 f: G! Q' a" {; G; F
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
- t% [+ |! y4 Z# V' G
document.all.tooltip.style.visibility="visible";
: T, t$ i' p: u" d6 g, p0 ~
}
6 n/ @, L- l! }% t; A
}
: _3 ~/ ?+ [. z: w0 e+ Z, L! w
" }# E$ _. F- W2 C- M% L/ X
function hidetip()
5 a# @' q: Q ^3 b* O! g! m! S
{
9 A* P9 A. E5 I! e
if (document.all)
3 w7 y3 E/ P8 W$ r
document.all.tooltip.style.visibility="hidden";
9 |- `6 H" ^$ C# i% K4 L: f4 Z
}
# ^1 ?) s4 q5 H" N1 M4 ~
4 u. s `9 U) n! r& v1 V
function setcolor(fntcolor,bgcolor)
1 t9 r0 Z4 M e" Q( e
{
3 e: h C# {. W D# U: V
document.all.tooltip.style.bgcolor=bgcolor;
- y7 n9 ?+ i' ^; Q$ r. ]
document.all.tooltip.innerHTML.Color = fntcolor;
; Q9 N, Q* @, ?; x; P6 v9 C
}
. y1 Y) R& A. h. g1 p
4 E' Y! S w, ]9 t
function showhint(text)
6 {. U+ l9 j8 x5 J
{
$ l/ ^- s( V9 D4 g8 M0 d+ H
onmousemove=showtip(text);
: b, ]2 x8 f3 K& N6 p
onmouseover=showtip(text);
8 ^$ {5 H9 F, u) [6 G6 F. X
onmouseout=hidetip();
, V; Y7 ?& L: q' o# D$ c
}
/ ^3 K0 V' r4 Y5 v9 U5 G& ~) X* c
</SCRIPT>
$ |3 v4 l% w' Y* a
6 r3 q8 [3 \& |$ M0 A/ y* I1 r
% Y9 n! R6 S# _6 S, o6 @
) Q2 |3 M2 s! w+ D) j. f; W
7 X$ f: m7 E9 I
5 p9 d. e. x) }( j
: \% q$ p+ Q# e z) r
二：将下面的代码复制到〈BODY〉区
: `4 s" C. t. N: A$ M4 R0 r+ L
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
/ a% d, ?7 Q9 `+ N- \' m
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
4 k& G" w2 |3 l0 a7 I! T; m3 C9 z
<tbody>
/ K* s# F2 e0 }4 G* p1 l
<tr align="center" bgcolor="#ffdfd0">
" `8 w* n. o4 ~- O6 Y
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
+ F! J1 m6 y/ L8 N; e
target=_blank>赏心悦目</a></td>
% E* K4 B1 s# C/ }
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
+ @" \- g) j/ V& w- h. V6 ?
onMouseOut=hidetip()>网页素材</a></td>
. J8 K3 I2 e& ~& m& }8 H: ]# {
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
1 N; D1 y6 j6 c2 T6 ?( v
target=_blank>图像处理</a></td>
5 _8 W0 L) o* P# X* @$ h7 b
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
/ u0 p& V+ \) p, B8 Y- V
target=_blank>网页特效</a></td>
2 b2 K$ C3 D" Y U: B" g
</tr>
. {$ U- ~! ?. f2 ` b* c
</tbody>
" _/ V) W8 Y3 D- D$ \/ \" P
</table>
欢迎光临 捌玖网络工作室 (http://www.89w.org/)
Powered by Discuz! 7.2
