标题:
网页之带注释的表格菜单特效
[打印本页]
作者:
zw2004
时间:
2008-1-21 20:52
标题:
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
/ A/ Z0 \& {! i3 M/ y" x
<SCRIPT language=javascript >
w- r3 o( Z) M- ~7 r4 V9 d
document.write(
! @) R5 k: _+ L' f- A- O, ~% C
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
& m D% {1 f& x0 W) T% _: B2 o' ^2 _
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
7 l7 b5 M/ }4 L) S( e1 e7 }+ ?# i
- P( |0 q9 F4 V( h7 X5 ]1 Q
function showtip(text) //显示链接的说明
& H' c ~, p8 g7 K% r6 O* ]
{
% b4 u5 |, q6 w; }
if (document.all&&document.readyState=="complete") //针对IE
6 ^2 {3 a! @3 A: Z* u; o
{
8 X- X- x) }, U8 p: ~+ D) `" m
5 h b, K3 w7 @! {+ J2 C( b
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
% t* `, n( i1 E8 S6 z; R
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
' @" S4 k0 k3 n7 w0 G6 C
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
" ?0 } E2 v5 y8 l8 w
document.all.tooltip.style.visibility="visible";
: A/ ^$ a8 f% |: [, r* a
}
# `( O( p$ d+ [9 h
}
1 f* E$ g, V1 U% @
. x2 e- o& J* z8 N7 c1 l% @' q
function hidetip()
( c1 E1 U6 ~, i6 y! I! I5 O
{
) g- Q: w7 i' W! k8 X' n
if (document.all)
& f8 K: n: ]9 k% F
document.all.tooltip.style.visibility="hidden";
" P \+ ~5 ~4 v+ p, o u. K4 K
}
" j2 D; B& ~' V2 E; |
# _* D* d+ M: @2 [8 j P2 W$ q7 s1 K
function setcolor(fntcolor,bgcolor)
$ R; v% _( E- ~8 r" p5 ]
{
) ^: g" D' V h9 K7 o
document.all.tooltip.style.bgcolor=bgcolor;
' g/ m% n) v& _& E# X9 D
document.all.tooltip.innerHTML.Color = fntcolor;
3 I" c' o3 D( G$ [
}
. e( g& _ l8 P! y# i8 C
4 e- i$ I. {) y7 b, i Z
function showhint(text)
3 e9 t- V: x9 L) F
{
% m/ }3 j; g0 h/ s9 D# Q8 d$ M
onmousemove=showtip(text);
3 h$ _; |. |5 B0 a0 B; `7 ?
onmouseover=showtip(text);
$ {( X! m& P! e- V8 a3 [/ |7 I
onmouseout=hidetip();
! ]% r( w' c) \& W7 x% h
}
& _4 ?0 O+ s1 l% O2 @$ i# V
</SCRIPT>
8 r/ _8 J) l+ d$ K- y2 q4 I2 I6 S* L
; D9 p+ P9 F+ N
# P# ~& Z. [' ~
. W5 i+ f {9 Y$ ?0 ~5 K+ f7 {5 r7 B
0 a9 ?7 ?9 l ~' X2 F8 A* \
8 M; Z' d7 p" |
2 [( j$ L6 J" E0 |
二：将下面的代码复制到〈BODY〉区
/ A' n' X; `2 L2 |
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
+ U* l' Q! J% Y N$ S; q* n* V
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
- n, y: ^0 H6 d/ s7 N
<tbody>
. H& b# ?6 K+ S7 t, ?+ H, d
<tr align="center" bgcolor="#ffdfd0">
' e, B% o0 k6 J$ T% G; x4 T( D$ d( d* ]
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
( W6 K. q3 ?: y( s
target=_blank>赏心悦目</a></td>
0 F2 [4 x' j. H) W: j
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
9 O( m f8 J; W- j9 J' }# J
onMouseOut=hidetip()>网页素材</a></td>
2 B9 O) o$ ]. `! |% [/ e2 W; N
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
3 q) Q* y5 e0 V7 T
target=_blank>图像处理</a></td>
* X& H, [& Y8 }4 v2 c% ~) v
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
+ d4 ^, m( S8 ^7 g3 K& J( x, C& i
target=_blank>网页特效</a></td>
9 m) q: {8 [& t+ N
</tr>
- a' N8 H& C( ?. A _
</tbody>
& H& M2 v: b) x0 G }- R1 P K
</table>
欢迎光临 捌玖网络工作室 (http://www.89w.org/)
Powered by Discuz! 7.2
