标题:
网页之带注释的表格菜单特效
[打印本页]
作者:
zw2004
时间:
2008-1-21 20:52
标题:
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
2 W4 A* P3 t" i/ Q
<SCRIPT language=javascript >
& H% W; y+ N/ A
document.write(
5 C, c" W/ x; w. |8 p
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
1 s1 q6 f5 P: K4 i5 p; Y8 [5 C
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
2 d5 u! @/ k% s3 e5 X) z- M1 ~
' y- t% j- {# X
function showtip(text) //显示链接的说明
5 I; x1 g+ y( t
{
; f V6 V' n9 b1 o4 W# y
if (document.all&&document.readyState=="complete") //针对IE
6 t9 {! t' a1 [9 j0 k; J7 o
{
2 t4 z0 @( b2 Y3 ]/ w9 z& r
C4 ^. F C1 v [( ^+ O
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
8 s1 C5 }# {* r" ^% m0 t3 L0 W1 f6 b
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
3 y& G3 c" I1 o, }4 |
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
) k6 w, V1 u% }. L
document.all.tooltip.style.visibility="visible";
& ^& y% |' s$ {: s. j* W/ y
}
; J7 r1 r1 \3 w+ K
}
" l. o( @. g! h- f
9 N4 U2 n4 S& L2 G B9 \: c
function hidetip()
( P+ {0 I, l# [% l' ?. g: {9 L; h
{
( `7 A$ X' p$ C* D# ?8 H
if (document.all)
7 t% \+ O1 H. R
document.all.tooltip.style.visibility="hidden";
! d3 n1 \* P/ Y0 R
}
8 G. \7 [$ E2 d9 `, p& F) c n" T; W
8 X1 G3 u+ w6 ?/ w. [( U$ I
function setcolor(fntcolor,bgcolor)
, O7 e/ f6 `( P4 t/ u) @) E" u
{
9 X; ^* @! X: q E* [! F3 ^, F: P
document.all.tooltip.style.bgcolor=bgcolor;
1 @8 V! J/ {8 J7 i; i" H
document.all.tooltip.innerHTML.Color = fntcolor;
/ Z& W; J0 P, q. X- j9 e
}
% D; F s/ g0 B& l i* W- m+ v
5 ?# J @/ J4 r( j6 ?* C: w
function showhint(text)
: j0 ?# E: N! p: w2 E1 p4 R, u
{
/ x0 [" G- s- K& {" L0 u
onmousemove=showtip(text);
2 N3 u" F# s# r3 q
onmouseover=showtip(text);
' o4 o x# Z3 P, J0 F1 B, G, ]
onmouseout=hidetip();
& n1 h$ ~$ b2 |* c9 x1 i% e% y
}
. {. Q- H: e# A( E, r8 P2 v- e
</SCRIPT>
. S- a* u7 `5 ]- a, u3 }6 w
7 G; Z. B1 i, k; ? s$ t
! w1 [4 K; n3 Y9 o1 E& O
t" r* K9 ~9 {# ], n0 e( A& ?
( U- J$ d X( o7 p- `3 }
+ C( p5 r4 b, [ c% \/ q
. b, s& O/ k8 l5 m% Z! A
二：将下面的代码复制到〈BODY〉区
9 \/ J; A8 j4 [8 {5 R: I3 [/ K1 h4 b# m
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
3 p% \2 g% I& q% n. n
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
6 N. ?& f4 L0 M/ \4 F) ^5 P
<tbody>
4 l# I1 X& A7 V2 k- z5 ^
<tr align="center" bgcolor="#ffdfd0">
T1 g; a% D1 k: C! ?' a
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
( \; ] @1 c# e! U
target=_blank>赏心悦目</a></td>
% r( ?8 V. U6 ^& |$ w3 R
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
% Q& w( o9 q# t
onMouseOut=hidetip()>网页素材</a></td>
8 s3 f4 s9 u5 P
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
: P) a0 E3 f) k# M
target=_blank>图像处理</a></td>
+ q5 d6 y4 \* R8 }$ U" c
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
- L7 e3 B! u7 g
target=_blank>网页特效</a></td>
" C, ]- e2 B2 g0 [. r
</tr>
$ `% D$ M: J$ O4 l; C
</tbody>
+ T5 l( G4 l8 f3 U9 Z
</table>
欢迎光临 捌玖网络工作室 (http://www.89w.org/)
Powered by Discuz! 7.2
