|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间+ W+ [" k. V* m, O3 r" y
<SCRIPT language=javascript >
2 R3 U* H+ k* Y- ^, ~* V! z9 R9 ydocument.write(
B0 o: _& r0 k% g% p"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\5 f& q$ s% ?$ T/ m: T( ]1 V! T
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
3 h2 a5 e5 J }( G) e1 ]1 [7 w% h9 p% L( j4 H3 O- Z( A! n
function showtip(text) //显示链接的说明
! z1 m$ Z3 {% y3 Z t5 C8 F4 F{
" s1 ^/ z" P5 X; I% A* v if (document.all&&document.readyState=="complete") //针对IE
* N( R' d( x0 e! I/ M {- |, {- i4 a L% m5 M p
4 r! i) v; v$ d3 `4 P) U" o
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
9 ~/ w5 M6 r0 O% [1 ~% Z+ ]" V2 G document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
! s/ {; c$ f9 @2 \9 U a% E2 l document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
# V# O+ e! g; W) y3 t: [ document.all.tooltip.style.visibility="visible";
+ a; v4 m; _3 b$ i* F6 o }
0 m5 I- B5 @. v) f) e}& M i; `3 m/ Y. o9 H$ _
- e3 b) J0 k( `; P/ }/ `
function hidetip()
6 r; K+ n0 d$ q{
: G/ E4 ~* D& \3 ]% b5 P3 Pif (document.all)! E0 ~9 V8 Y& n/ x h9 N
document.all.tooltip.style.visibility="hidden";
' D1 B+ |$ Y9 R}! J7 k4 n4 ?1 j% L' j/ {5 I4 t) f
# M" [% z& \% r0 B T( e3 Wfunction setcolor(fntcolor,bgcolor)/ D# W0 p# w: s- _* i, h( \
{
8 w: G! T6 u& y. ]4 ?8 w/ Q/ c1 W document.all.tooltip.style.bgcolor=bgcolor;
5 ^/ X- W7 D* R+ ]" N/ R. \5 ?1 n8 P document.all.tooltip.innerHTML.Color = fntcolor;
* I2 y+ E* U4 K* H$ }}
/ I# U' H" w- _3 i4 V' T4 t O1 \
function showhint(text)& k* X# _2 z3 z: S" b2 @# x8 q- j
{8 ~3 ~# }* K N6 b! l) D2 H/ a7 w
onmousemove=showtip(text);% L0 L7 H0 R# Y( q# g% B# K
onmouseover=showtip(text);1 A% E% }( E9 W5 j( A) D3 P M" a
onmouseout=hidetip();
( i W3 x( f4 p1 E z/ |}
6 V; [- O6 f/ t# A</SCRIPT>: {, y* M2 P# K7 R
2 h* U' l. b5 f1 r" F0 n
4 E' G7 S) y5 c% T9 N1 h' R' Z7 w, t1 U9 ?2 F, I
# v- B9 J0 A& s" M, B. G& ]* Q$ z9 m$ ]' O l7 G7 A1 P: T4 X' D; e9 y/ ^
! K9 E/ K8 l- ~1 K, b& E
二：将下面的代码复制到〈BODY〉区. _9 o" K$ }! ?
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 + b# \1 s% n' j
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
Y) s. a- E2 l0 A: E' ` <tbody>
5 @% N2 o) {' k$ ~4 r <tr align="center" bgcolor="#ffdfd0"> , A2 ^3 y" l) \8 O
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
9 V" K/ u* n/ l6 D. t6 j8 K' Y target=_blank>赏心悦目</a></td>
. P* i# s9 ]$ C) C <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" 6 Y3 ?8 x+ w7 u, m" z: }
onMouseOut=hidetip()>网页素材</a></td>6 d5 C3 |" i h9 l- N# l
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() 9 A* Z; T7 H8 ~& x# ]! f( \
target=_blank>图像处理</a></td>
2 J4 \) W$ e4 w$ ^7 j& A9 ^ <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
# `6 _, r, ]( }2 t" _, R" u t target=_blank>网页特效</a></td>
+ N& B7 ^5 S/ X; k2 l4 g </tr># m: Y# P$ ~4 _& n$ \2 Z5 m
</tbody> / }: L4 ?' g/ c( }2 H
</table> |
|
发表于 2008-1-21 20:52
|