|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间; {" G, i3 A3 l& [
<SCRIPT language=javascript >
1 S# B2 t# L3 w* pdocument.write(- P* Q3 `+ Z- D$ K
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\1 W% M6 V" M% r4 Y# L
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
' ?& [' F- M5 [7 O
8 i3 }/ J' C. P- Xfunction showtip(text) //显示链接的说明+ M* p+ g9 ^- l6 k: y
{
1 f; j4 R6 w- }: y. K if (document.all&&document.readyState=="complete") //针对IE
% Y% Q' W' }) A' K" J5 B' C/ C) c {/ J9 P! N2 P v9 f
$ c* M7 j/ H5 E( l. R document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";( l+ e0 i! H+ J4 d; B) V7 b3 R
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
0 b( \- p: _6 t6 x! I* _; Q document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
* v" _/ d( `2 E document.all.tooltip.style.visibility="visible";
- C! w. r+ E( P3 g' a3 v7 \ }- M; s* l+ o3 v- m$ ?
}
& m4 m; E' B7 K- _+ c. J
$ @7 k% R |: {* t7 Tfunction hidetip()
5 g1 E; B2 I; D* S{
^# ^& K q1 P5 v" K: q/ e( wif (document.all); ]: y8 U- G# F6 m
document.all.tooltip.style.visibility="hidden";% F4 q, o" c, c; B8 {/ p
}7 n* e6 R/ b1 r
/ s; W2 l N" h1 X9 L
function setcolor(fntcolor,bgcolor)
e8 } n3 {) a% }+ Y{
3 l: A% W/ M' s document.all.tooltip.style.bgcolor=bgcolor;
8 i, A1 _5 ~; u- M% ? document.all.tooltip.innerHTML.Color = fntcolor;3 Q1 a6 d; x1 u* W
}
- E' A- u/ N. b/ T& z: I( Y/ q& b+ q+ |
function showhint(text)
0 x6 X1 ~: w$ v+ X: \{
( c+ O$ Y% I- T) T, k onmousemove=showtip(text);2 X; e3 o" y! X! q8 j0 j4 M% ] x
onmouseover=showtip(text);% Z' }' k+ u; \! _9 e
onmouseout=hidetip();/ Y- U Q3 D; ~ {0 O
} N# Y4 j. I: h, W
</SCRIPT>
0 ], G9 n/ B9 L3 J2 K' J" T% D% }. |6 M; F/ v
! h, }& s( ]! x6 m" r- P/ {
5 I, k9 L( ^' |! ~) M8 Y
7 G& I V3 h& Y
- _" v4 U5 |7 k2 b) P0 H+ y, b _
0 v$ |+ X, t9 q- a0 z6 c二：将下面的代码复制到〈BODY〉区
1 F% z) ~+ V; [/ ]5 i4 X<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 7 O& J# l# v& c- [' u
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
2 d# g9 p; z. }) Y k0 } <tbody>
9 p5 N( h; ^; f" N+ r7 _ <tr align="center" bgcolor="#ffdfd0"> s: q( A# J" c
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() ; Y" I; p; _# g6 \# Z
target=_blank>赏心悦目</a></td>
/ \- i: n/ X& P <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
6 A, j9 i0 n1 F4 p2 m onMouseOut=hidetip()>网页素材</a></td>
% O9 b% W5 T @ <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() - }! F- [! M/ n0 o
target=_blank>图像处理</a></td>
: C8 `! e5 b0 z8 M E <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
" N$ t. |; a! g# b target=_blank>网页特效</a></td>- G d7 F# y: U6 v
</tr>) i, c+ D& w: f# n) w# F
</tbody>
9 p. ~2 E' d" w5 `; j* B </table> |
|
发表于 2008-1-21 20:52
|