标题:
网页之带注释的表格菜单特效
[打印本页]
作者:
zw2004
时间:
2008-1-21 20:52
标题:
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
6 v7 C( ^. K, _4 ~/ ^
<SCRIPT language=javascript >
( i) t! H- V. J" h( l
document.write(
q5 n v4 o) i3 X$ k# p6 n
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
8 K, o& n( }* n
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
' l( t) Z, t4 n6 C. V$ c% O1 l( M
! {; t9 g! [+ i: ?2 x
function showtip(text) //显示链接的说明
* _* y# w0 m% J$ L! {4 L6 g6 S8 A
{
; Q2 Z" y* E6 F( f- V
if (document.all&&document.readyState=="complete") //针对IE
" K0 K/ ?7 W m9 C# M/ p
{
' N/ Z' K% F% G$ W; L! H
: x6 O# h$ o! x- d
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
( V0 p5 k6 X# H1 [, a r
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
) V8 [! A/ u1 k1 d3 t; s
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
! M: d# z& k- D. x0 X* W
document.all.tooltip.style.visibility="visible";
5 H4 @1 ?6 i% T8 n: O, P; A5 |5 C7 f
}
9 v( }9 [/ f1 U; a& d; a
}
7 X6 m: x* g; [: i
/ s- P- E( V/ w* m
function hidetip()
% N+ ]3 @! b; x. o# k0 o3 V
{
' S N2 n+ p- ~3 T+ m
if (document.all)
. u% _2 P' v' n
document.all.tooltip.style.visibility="hidden";
7 `! L4 l! F+ x& [ G6 X0 F( s& M$ Y' }
}
( ^/ z3 t7 q3 J4 y$ W2 J$ ~9 S$ |
/ h8 h; h1 o w8 c' C" T6 f, S- |
function setcolor(fntcolor,bgcolor)
' b( C* n2 `: e, n% u
{
/ ] |) g2 P3 b
document.all.tooltip.style.bgcolor=bgcolor;
n& o* ^2 Q% p+ X4 ?3 w3 Z0 R
document.all.tooltip.innerHTML.Color = fntcolor;
* B4 J3 @4 N8 I4 T, ?+ b
}
4 f* G! T0 S# O4 q1 R, u! w
6 { W) c, O8 R0 S
function showhint(text)
/ f9 c. \9 o3 v/ F. ?7 z- @
{
* U) J) r) W9 H
onmousemove=showtip(text);
% N: r( ^: ^4 [% U1 e% `
onmouseover=showtip(text);
+ f% x# T3 y; z6 k. {9 a
onmouseout=hidetip();
2 a7 b, H, c% | i, N
}
5 I" x3 j1 U0 Q7 _) o
</SCRIPT>
% N8 s, n3 ?! e) L/ Z$ \0 `+ m
# h6 E4 x8 i m% K4 M0 x. H ?9 ~/ n2 ?
; y$ P. \( O4 P2 Y' B( {
& G* e+ Z9 ?% h2 q/ W0 Y
- ?! ]$ W) Y& s# i! Y( p
& Z. q) O6 G( S/ F0 P
! B5 w% ~ p4 L" ?9 h' T2 W
二：将下面的代码复制到〈BODY〉区
0 Y; u+ g& }" ? g+ a/ {$ W6 W
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
. p, u0 i5 f3 ?2 v
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
6 Z7 f, b: V# a n# ~0 m7 G
<tbody>
, [& a/ @) i, g
<tr align="center" bgcolor="#ffdfd0">
, L. M8 v% C" @7 h: A' w2 Y; [
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
! I2 s9 Z' M! m; b
target=_blank>赏心悦目</a></td>
% v M$ Z9 A, y8 r! a% ?
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
( o) |) o; V1 E% H! g
onMouseOut=hidetip()>网页素材</a></td>
* @/ _" X2 w& D9 L/ S0 z7 k
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
# R1 j$ _. R* z2 ?/ v
target=_blank>图像处理</a></td>
9 F& s& y" D6 J& [& A) \8 U. u
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
6 A2 V- U7 w3 P, B0 H+ u
target=_blank>网页特效</a></td>
0 Q" F. ]; M. R
</tr>
u+ v5 z$ l! A$ w6 |% D9 Z
</tbody>
+ u. _% ~" d2 e+ T n
</table>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
