标题:
网页之带注释的表格菜单特效
[打印本页]
作者:
zw2004
时间:
2008-1-21 20:52
标题:
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
- j3 Y! S: R% v1 F, B4 \, m! Y1 K
<SCRIPT language=javascript >
$ h; s& Y) D& f0 o: w2 w. }
document.write(
. o/ O6 M" b9 u/ ?
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
( J7 v {4 Z1 |: M+ z1 _( [
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
/ M, {- v1 V, C) m& y
5 L4 m I# Q. u9 P$ O1 D3 m: E0 l9 U
function showtip(text) //显示链接的说明
! a/ k( f8 ?$ K A
{
- t6 K" m9 p# T# o5 C
if (document.all&&document.readyState=="complete") //针对IE
) j$ a( K6 s5 ~* H1 L0 \
{
p7 m! G) o9 m
! k2 e8 l: [: y5 Y) _* ~
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
x$ Y7 k/ Z3 O, m% f
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
1 |; B) G. W% I; S" \* j* i" h
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
% O6 Y0 ~$ b/ }
document.all.tooltip.style.visibility="visible";
9 t0 ^" q( U6 d# E$ ?
}
7 z0 q: }% \1 f9 y- p
}
! ^- D3 ^0 V/ A. Y+ c0 |& j
( l) l$ z; Y9 m% C! R- L6 L' @
function hidetip()
1 ?7 Z5 R2 l; x1 q, `' ]
{
9 I/ q6 P) L \4 n3 b
if (document.all)
& I, E$ i& j4 D- j) O
document.all.tooltip.style.visibility="hidden";
4 p# `* ^: L* v, E w+ T7 p
}
8 J( @& X' t1 C" k( j3 {7 m
, @8 {. L0 t6 h& p% g6 w5 x& ~
function setcolor(fntcolor,bgcolor)
9 Z- i* [, u- ^8 r+ ~# R! {1 t7 C
{
m2 }# @+ r5 ^3 V# l, K1 S) V
document.all.tooltip.style.bgcolor=bgcolor;
4 v$ n6 H, Q) J
document.all.tooltip.innerHTML.Color = fntcolor;
4 Z: G/ t, [4 ~/ e+ A( z
}
7 F- H) k" @) i
( u! p% W" |1 N
function showhint(text)
# @0 W1 [5 O2 c7 ~* \% y
{
A7 @6 G' X* T! z ?3 Z6 u2 t
onmousemove=showtip(text);
3 p4 L/ m1 K! ?3 P) f4 K
onmouseover=showtip(text);
( @/ [7 B* U! n c( p& {
onmouseout=hidetip();
5 R- _7 U$ q- W6 _& e8 X
}
& K1 R8 M& s! C' Z4 L
</SCRIPT>
2 m) g0 a B$ c H: O ]
: v1 u9 R4 U- u- @6 ?
) C3 h) V" F, F: V
" i% }! @+ ?9 U- Z- o) d
* G/ h/ ]1 k* v$ o: E* \
! @4 C: D F7 k! T
1 P+ d, s, S, C* `$ [$ t; P
二：将下面的代码复制到〈BODY〉区
% H1 L3 n0 Y8 t; O' |
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
+ f8 l: `% c: b0 m# ^8 S3 Y2 b
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
0 Y# ^/ c1 B( N9 D
<tbody>
$ p) {6 Y6 R( z( e5 ~
<tr align="center" bgcolor="#ffdfd0">
- Z. v6 f" y# b' o* w9 x* X7 s
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
8 r) u$ g$ I+ |4 a0 o2 h, p
target=_blank>赏心悦目</a></td>
; S8 A& f% O. m1 [
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
: [4 D& K1 a e+ N# _$ R: H& y
onMouseOut=hidetip()>网页素材</a></td>
0 k% J g8 H, l/ Z4 v7 r( T
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
% X. T, r5 P B+ l$ A8 k
target=_blank>图像处理</a></td>
: r. J7 x5 B& v. B
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
" y9 Z H% h" W+ u1 C( p0 O1 t+ j6 J1 z
target=_blank>网页特效</a></td>
+ R8 S& f$ V' p' A3 k! {
</tr>
% P* h2 F3 N0 l7 Y% B |: t) {3 e3 i
</tbody>
! s* { V, y3 }4 R6 y
</table>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
