|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
1 S+ v* F3 R" L& J' J& [<SCRIPT language=javascript >
$ x1 M, I, m; U0 {& u2 Idocument.write(
* N( {3 l5 m# W- r3 f"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
2 L' A/ F0 f! m; V; m0 C;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
: U) z# s0 T% u$ a) A7 Z+ b
' ^+ ]+ J$ R. t7 Vfunction showtip(text) //显示链接的说明/ r6 T& @7 N4 r Q4 Q0 C8 u
{
$ X7 p7 @/ f& u& I if (document.all&&document.readyState=="complete") //针对IE) t; X' T3 R; R/ Q% h8 @
{5 ~! \0 I" j4 l3 p
3 @0 Y* h K+ {" R, U' q: b4 I
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";- O: c* s* t6 W* Y
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
) L* g: B+ ~. x0 A/ B/ {: |9 u document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
- l/ I% b- f+ p4 E. }; X% o b& N document.all.tooltip.style.visibility="visible";
# w. y. t/ h! z2 u" D( ? }
H# M: D+ ]- [9 Y( ^# h8 [}
/ q# A0 ^! V. ~& X3 [; R, R1 @$ u
function hidetip() , ?4 H" H8 T3 E, g- y8 l A% @
{
" ~" b) E' H+ V5 U1 K: ?if (document.all)1 s/ @( v5 g* Q; I# _" D8 O
document.all.tooltip.style.visibility="hidden";% \; W S( \) R; Q6 B$ x
}1 Q2 B: o% W# V2 ~
: X% Q6 L Z! p4 v2 h7 Q3 a; |! [
function setcolor(fntcolor,bgcolor)
$ ]$ S( Y/ c8 {7 Y$ }* ]{- V& p, c! k w4 B
document.all.tooltip.style.bgcolor=bgcolor;
. X) r# P* V2 ~( g K3 j& B$ e7 Z1 D document.all.tooltip.innerHTML.Color = fntcolor;, Z( H }0 G, D) F; h# N
}" n/ T! x; `2 I$ F/ I3 [
. a& \0 x9 q/ H/ l: q+ n
function showhint(text)
) F" u6 ?8 L$ O8 U! L7 J! o{( R, J. @3 [6 }# {0 u. @0 R
onmousemove=showtip(text);
1 G4 f6 k; m, H( b1 F onmouseover=showtip(text);' ~6 _( e! G5 L
onmouseout=hidetip();
7 l8 w* U. G) p# ^}
4 ~: t/ E: k' C* }</SCRIPT>
1 P9 n/ c$ |. r* q
; q# U" Q, P( E+ t G; l# |& |1 {: p$ o' H! c1 C, }$ ^: P
. g2 x; d- l# K# x$ I% F
% j4 J( k; S( s5 w, I6 m6 \( V g- [- z1 {& Y/ w
[' M Q8 e8 f/ i) {二：将下面的代码复制到〈BODY〉区
' ?4 J- l4 P, n3 p8 v% a+ d<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
- y0 l' b" I1 P8 c1 ncellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
) S1 c% W7 j" B <tbody> 4 ?. B& G5 c6 O6 J
<tr align="center" bgcolor="#ffdfd0">
0 `* z: _, ?8 X0 n& C <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
7 c# c6 R/ D% x# F target=_blank>赏心悦目</a></td>( p% G) d2 I8 w+ O* i( H
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
0 [: W9 _2 w( `, a/ p( @* Z onMouseOut=hidetip()>网页素材</a></td>8 e9 ]+ W/ K: m6 P9 s W
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
1 p3 [ |4 r* N: E target=_blank>图像处理</a></td>
' |% k7 ~' `9 M7 b' Q4 s \ <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
! {" B" m- ~4 x4 ^ target=_blank>网页特效</a></td>
7 N$ G% y" _ I, M8 i/ d+ T </tr>' E) V, F- D) e! l( F) p" G
</tbody>
+ ~ Q9 q. t9 v- `, W </table> |
|
发表于 2008-1-21 20:52
|