|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间+ D$ ]$ ]4 [4 q, L4 ]
<SCRIPT language=javascript >, Y6 f, ]/ P6 V4 R k6 ^7 `
document.write(5 G7 G) j, u6 N: U2 Z
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\1 M" y$ X6 L7 M* B, |2 g. w
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");' [# J9 H1 J9 l- O, Y
3 I! V! i( N! x9 F* L" X
function showtip(text) //显示链接的说明
5 q& u. { W9 ?% y, L B6 G+ Z" F* h{
0 ~ U6 u; N) D! |) Z3 v/ x7 } D if (document.all&&document.readyState=="complete") //针对IE
: W7 f" u5 p& a* M% ]) B" T {/ `4 |/ q5 ~3 F
0 a9 B; k1 L- ~0 R document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
' V, X+ M9 m# \1 j; g, w7 u3 W/ | document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
2 @' d7 i( P- u7 R0 r document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
3 h8 v0 A; t) _( R$ w3 d+ N0 I- g- } document.all.tooltip.style.visibility="visible";
$ J7 w. _! f; l4 M+ A }
9 q1 U; k1 \ E6 E( _& b}
. {8 k6 |/ ~1 B5 c
5 R7 q W0 k6 F6 Ifunction hidetip()
, W7 l" E' i0 }0 a7 C6 f{
7 ]/ W2 {: Z6 |, h ]+ M' Kif (document.all)
- T6 Z9 \) p0 E8 ~ document.all.tooltip.style.visibility="hidden";
/ z# c) n; h# J& u E: j. _0 y2 i# t}, M5 t6 w% B W: U9 H
. c0 ? E8 P" ] O: V) I) hfunction setcolor(fntcolor,bgcolor)
! y+ J6 m7 G8 L# G" a{
) V. \1 |; C4 |; k- p% ` document.all.tooltip.style.bgcolor=bgcolor;8 b' {, V/ k- X2 z" `
document.all.tooltip.innerHTML.Color = fntcolor;
0 S: J& O4 h0 P- R# b. r}% C4 q5 A7 {/ o9 t
+ E! n+ G( z3 e% D; |+ Kfunction showhint(text)
0 L5 u3 D- W; n# a{
# ~& Y" y* X9 D$ m; N3 T3 Y; [ onmousemove=showtip(text);; D( `* z. i1 \) |. r8 F
onmouseover=showtip(text);
4 `$ \' C, q, q7 ^0 O onmouseout=hidetip();
: y0 Z9 r1 A% I' I}
( e" D3 E& W" X& h$ ?" C; q</SCRIPT>
( u# a" Y- O) Z) w
& Z4 N. C/ Q9 B: t K/ L6 g
& {2 |; b7 h- E. @8 r( f, t2 Z/ X( W
( Y6 i, X9 |' [% W! S, }8 X6 I/ T# N/ U0 b1 [- S
! ]% I, Z" }4 y, J/ o, g
1 I5 O# h6 l( F0 ~8 A7 O4 I
二：将下面的代码复制到〈BODY〉区
. a6 V& `7 J; {/ X% v7 t- a<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
' [2 V' } V! j3 n9 S% bcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">9 E& t5 f6 j1 L
<tbody> " |# c, A; j. A; e
<tr align="center" bgcolor="#ffdfd0"> ! u# v/ L9 e* `2 Z+ ~
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() 9 l& M8 ~1 y0 X* l
target=_blank>赏心悦目</a></td>% L( \9 \' A" A6 U
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
9 F" o+ ] O, [3 a+ B# v( j onMouseOut=hidetip()>网页素材</a></td>$ X- Q2 e' V: h6 |, N% J$ c$ n
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() ) [ @' V" {. D( f" K- u' k
target=_blank>图像处理</a></td>
2 L! m4 C: z2 X/ e* C9 o <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
& ?( G" r6 D/ i& e- E target=_blank>网页特效</a></td>
5 q& G; F- \ r) [, T) n# S </tr>
9 k5 F% F/ P& y) ^. k+ e </tbody>
' D( g+ y$ u% j- Z; o. }: u </table> |
|
发表于 2008-1-21 20:52
|