|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
' S1 V) @2 X5 ~9 }5 R. d<SCRIPT language=javascript >
( m. n: @2 N+ g/ z Adocument.write(
4 l1 y4 i6 r, e# [) r$ i6 e/ y2 ]% a"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
' G7 f6 u W9 C# `- F0 L& x- n;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
+ c4 [3 c) ], U8 |( N k3 k% z" m" {9 Y+ q* m+ N0 [% W
function showtip(text) //显示链接的说明, f; V/ e0 X H9 _4 j/ W7 F# j, k0 i
{8 s E+ S9 ?& S2 U4 m" z8 w
if (document.all&&document.readyState=="complete") //针对IE% C& Y4 d H: ^5 c) |2 U" E P
{
' ^6 v: M, C+ e( P
- B( a2 h% K' v' h* [ document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";7 y' S) x, M5 I& N; _, d
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
6 I" o O5 L# t, U# R3 K document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
6 l) M2 t: {; k& ^" O document.all.tooltip.style.visibility="visible";9 T( f8 d2 [+ U, a
}8 [( C6 o0 O4 [
}
' K, M/ f' b' ?& |! I! A" n( {8 b! M3 }
function hidetip() 8 v/ s- O+ |1 S! O6 V7 Y8 F c
{
7 [0 m+ L. u; y# S# f5 Lif (document.all)* [/ o; j. D* d
document.all.tooltip.style.visibility="hidden";
6 [# W! k4 d; V}
3 X! g S$ e+ N' B% r* Y8 G- {5 {% C$ w6 |
function setcolor(fntcolor,bgcolor)/ s! _' r6 c0 k/ }$ n! O: d6 f
{1 J: C: ` f, Y3 o
document.all.tooltip.style.bgcolor=bgcolor;
8 Z. `$ k, `7 d* ~( X7 z% @ document.all.tooltip.innerHTML.Color = fntcolor;
" {, |9 j1 ^% ^ U F1 {}9 o$ t4 |$ A5 [ o$ u" q- Z
: y; G; d" |/ k3 c/ Q: ~6 Lfunction showhint(text)5 R9 q7 _: a: M
{, }, Y0 ~1 t) H( o" x
onmousemove=showtip(text);
; i8 I5 f/ s4 u- ]% d' j% X onmouseover=showtip(text);
; o! e. J0 D* \4 k6 g/ C5 i/ | onmouseout=hidetip(); q1 `& ]7 G6 Y4 P, n( Y( H
}1 g: R$ u, w& c h, a& \
</SCRIPT>
& i9 }) B% z2 O& o- ^' E& X3 k
$ S* o/ k# l: ?# `4 J) |! t5 o7 G) O: n! h% L R8 U
& u% b1 q+ m: z5 V
9 u" h% Z( P' u- R2 b* c& k
3 d; ~) F y1 q' t- v: P8 B3 }# |8 c3 Z9 H: u6 {$ P
二：将下面的代码复制到〈BODY〉区2 t6 C# H. z& l0 z6 }" E9 e/ W% a7 k3 c
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
, W {. l# L3 o, w! s1 gcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
* V6 }, @% ?& n4 q <tbody>
/ O0 U/ s) f+ J <tr align="center" bgcolor="#ffdfd0"> ) f D- [9 S$ f; F, a
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
) Y4 t1 a% N' T+ j2 A; U$ Q target=_blank>赏心悦目</a></td>* h: ?# x A# I, u2 U0 g
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" 0 M$ o8 o! t* E1 f2 {
onMouseOut=hidetip()>网页素材</a></td>
: Z. C2 q, m% M+ U- J) c <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() 4 L f/ C# {$ n) V' k& }
target=_blank>图像处理</a></td># L. A2 i' a$ n; e4 a
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() * w( V6 ?, v+ O* y' I2 X
target=_blank>网页特效</a></td>
7 A/ ?, Q$ ?( p# S: n </tr>
# {3 e7 e6 H: q% m$ s& ]9 C </tbody>
z/ J: y9 V- ?: i( t& D </table> |
|
发表于 2008-1-21 20:52
|