标题:
网页之带注释的表格菜单特效
[打印本页]
作者:
zw2004
时间:
2008-1-21 20:52
标题:
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
' g' q% [+ x7 q$ |' i @7 S) A
<SCRIPT language=javascript >
8 g6 T! b+ |& [* l8 M
document.write(
. h0 u0 ~) j* f, X; V2 M: t
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
" Z# s# k. X$ z8 R
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
/ e& M& n7 N9 Z6 v# _5 l- [0 ]' f
0 c9 `/ N- y c/ D* }4 d4 J
function showtip(text) //显示链接的说明
; m: W9 `( g0 u' \) \6 h/ E, v
{
+ s3 u6 j# v: j h# @
if (document.all&&document.readyState=="complete") //针对IE
0 @6 Z9 L7 F# z) X( M# ]7 o
{
' O+ ~9 @9 J* ^+ G" n5 a6 `' X/ }0 f
* x0 F- }: h% P
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
+ |" s6 B4 C9 K4 F
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
8 \2 K. x( M5 M8 v3 ^7 `/ P
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
; i& c1 l0 f" W3 a/ F
document.all.tooltip.style.visibility="visible";
, ]7 W& m( s/ D. ^9 q
}
5 c2 m+ W! p- S' ^* o* o
}
4 n/ [0 F% Z9 j0 @6 ]- c' J/ h) s p
# g% l9 v; a$ L& X) O" r. y2 r
function hidetip()
1 T6 |$ o! ^4 c5 g1 f' W# H' N
{
, x3 q7 J, d% o8 g. a
if (document.all)
3 L3 [6 Q, K1 Y8 V0 b! V* s
document.all.tooltip.style.visibility="hidden";
+ }. g5 C9 s W& z9 ?3 w& R% z$ E* X+ p) U$ I
}
1 Z4 v, p! }; N) U, X
# P/ Z% R- ~0 _+ u+ J7 M i3 x
function setcolor(fntcolor,bgcolor)
& n" O7 q9 @& i
{
5 s% V4 Q& u) ~! Y
document.all.tooltip.style.bgcolor=bgcolor;
1 V- i: z: r, }! d
document.all.tooltip.innerHTML.Color = fntcolor;
0 w! ]7 O# R* }8 \, O: k
}
* w A6 [* T/ o: @6 c! }1 k! T
6 ?2 L) }! M* d P
function showhint(text)
- r0 t3 X0 U9 ~2 w+ [% }. ]
{
# Y4 b [) |) ?2 b7 H9 {- H4 e) E
onmousemove=showtip(text);
4 p7 F' d; J4 X- O
onmouseover=showtip(text);
' e6 z3 w4 ~4 G: @
onmouseout=hidetip();
. O6 h& F% O" x
}
8 [+ a3 B9 x5 Q. e$ g0 r8 ~+ K
</SCRIPT>
1 o# G( c2 l; b" w
3 x" P. x7 ]8 P6 i; p
9 s, ~1 e# ^( O7 c* K: Z
5 O% i- ~1 n. {% J9 F3 x) K4 N# e+ m
* r7 Y V/ g& ^5 b6 I, v3 S# n+ F
' s" X7 {) c7 C/ `7 M" d
5 _, h2 s# Z, G6 d
二：将下面的代码复制到〈BODY〉区
6 N5 L9 e9 S, o7 Q4 S
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
% t: i: {( i$ O: Z" k
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
8 s. w; p& p$ g4 t
<tbody>
8 h+ e$ d9 w6 I7 K9 Q Y
<tr align="center" bgcolor="#ffdfd0">
3 ]8 [$ Z* Z8 l, m, x y* T
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
, k2 h$ w. v J- a9 ~7 h
target=_blank>赏心悦目</a></td>
7 j3 D5 y( o7 o* c( b' ?
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
, u$ u4 U4 h- }! a( d3 s0 x
onMouseOut=hidetip()>网页素材</a></td>
! X: ?( I* O1 u; n
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
+ C" Q! Q) x& @* f& G& ?
target=_blank>图像处理</a></td>
& k; [" Y% d7 m* G% K8 a8 w5 ^
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
; T z5 W- S1 n7 y% I/ l) g
target=_blank>网页特效</a></td>
8 z( B# N1 ~ M* x, S
</tr>
/ Y5 H/ K5 L" `6 k
</tbody>
5 ?; M% w/ N3 Y& m6 |9 r8 I
</table>
欢迎光临 捌玖网络工作室 (http://www.89w.org/)
Powered by Discuz! 7.2
