标题:
网页之带注释的表格菜单特效
[打印本页]
作者:
zw2004
时间:
2008-1-21 20:52
标题:
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
3 n6 \; g& o+ O8 z' a( Z
<SCRIPT language=javascript >
9 @0 s( H Y. r
document.write(
' x) E- L- e& W+ t. F4 t/ L) b8 N
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
# H4 N; G3 t: ]7 Q" X [2 J
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
/ j- v9 i; b& b' E, a6 N" e
4 x5 S! r# I: N! }( ?$ O4 C4 V
function showtip(text) //显示链接的说明
- h, C2 b& A7 p9 v" d* b7 M% O3 p
{
( b4 x. a- s% R$ t# J' s. k/ @) }; {
if (document.all&&document.readyState=="complete") //针对IE
1 E1 T9 X, P5 X Q% q' A
{
9 [. W9 r) Q( V- r- Z$ P/ |
" F* Y: ?4 J9 z- X4 g
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
# O9 [: S! t" t! M$ @ }% C7 b
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
% H" t. |" m3 W1 I- {
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
' p1 M" Y* F. v7 c
document.all.tooltip.style.visibility="visible";
+ i V- t( o0 [' z- O6 u8 q2 y& j
}
5 n l* O) F9 g) w. N I7 Q0 ^8 \2 G
}
% H- F- I8 T* \) x c6 B
+ {3 p! w: i: O |# _4 U- j5 c8 _
function hidetip()
( i/ h' t" P* J' E5 e
{
* o- B& W, Y ]: B/ R# ~! P8 U: `2 L
if (document.all)
: m9 s0 F" `" r( O
document.all.tooltip.style.visibility="hidden";
3 ~0 i5 i0 P5 {: _0 N
}
9 Q6 E8 o6 n5 ?) B5 L* K
: A6 Y) C8 a0 d" C; L W/ t& _+ n
function setcolor(fntcolor,bgcolor)
% x$ E. G) @2 t
{
, j9 l# V" @; @0 V$ i& C, s
document.all.tooltip.style.bgcolor=bgcolor;
3 t3 z6 \* z9 H; R
document.all.tooltip.innerHTML.Color = fntcolor;
' l# k {: Y% |+ \# G" b
}
9 h7 P+ F/ j& K6 z, c% F3 c' e+ D
5 Q# \ z! F8 r. C# Z
function showhint(text)
- K6 ?7 t8 {5 d+ d/ u* v9 a
{
8 O3 e- A7 c$ `3 f+ p) s' r
onmousemove=showtip(text);
, A/ i" y F3 o8 X# B0 c+ x7 D
onmouseover=showtip(text);
?" H0 i/ `1 Y4 u
onmouseout=hidetip();
6 n: v' C- e% P) z
}
& y1 B, g7 X3 q+ ?
</SCRIPT>
, v1 d! a+ p1 H, y
: w3 t% e: X4 M4 t0 J- Z; g
' n& W8 N5 @& p: C* {
5 z( u8 ^9 M/ q0 f R3 [- V3 f# Y* {
7 j4 c t, W7 g4 q
" k) w9 @2 J; t& t- h) j' m
2 `0 ]1 L! F0 E/ _- t: d6 e3 L- w; [
二：将下面的代码复制到〈BODY〉区
! Z7 {% i& k; I! c- x
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
6 m- g$ X/ m( s! @! ?; O
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
2 Z# [; \2 f7 j# D9 y" C
<tbody>
* O- p- y% m; L; Z* D2 A+ Y
<tr align="center" bgcolor="#ffdfd0">
& [! G' M2 u% F! h3 j8 H
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
( g" \; z; v0 ?. y2 }% w9 {
target=_blank>赏心悦目</a></td>
/ D! E! P' w" Q* I$ T
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
1 [% g, q+ Q5 J4 w
onMouseOut=hidetip()>网页素材</a></td>
, [( G$ e# B3 {: i$ l" g8 m( ^# ?
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
" u# g; w7 p( {% C) b
target=_blank>图像处理</a></td>
- I/ r B9 }2 {5 E/ X
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
0 D+ f1 M& _4 b; H0 p
target=_blank>网页特效</a></td>
6 o' W- b7 f& F
</tr>
3 P2 y+ v( S! M. |+ F f. F4 j
</tbody>
0 J$ Q4 ]! w2 z8 ?) T' b& y# O
</table>
欢迎光临 捌玖网络工作室 (http://www.89w.org/)
Powered by Discuz! 7.2
