|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间. H2 ^3 l7 i) G6 n z' F" ^
<SCRIPT language=javascript >
1 E. G3 A# e% O/ ldocument.write(
, i% T4 s6 I& ~2 K/ T. u. l* R"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
) P: T- C+ i4 I9 l3 f;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");8 S" ] {) i. |9 }4 l& }4 C2 \+ P1 ]
5 L' g, C/ c$ D% H! E4 L S. v
function showtip(text) //显示链接的说明$ B# s- r& c& c# i
{4 J& I- _7 J, n: w, W
if (document.all&&document.readyState=="complete") //针对IE
/ k( n i* I% Q2 k {
8 ]- B" p! M7 ]' C
) G% V+ ^5 Q: l. T document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";& M) r" M" V7 n
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
; |8 ]. Y7 Y. a0 H document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
1 f+ l! H+ Y* I document.all.tooltip.style.visibility="visible";8 D- A& b6 p8 F0 J
}
# C- ^. i( V/ Q}
m: M/ y' C5 ^5 x0 r
; c& e. u0 `$ ~ u8 Nfunction hidetip()
, h4 Z( y* t! z o. [{2 r& f/ C- \( a5 u6 L2 u
if (document.all)
8 l5 a. j8 F: n( ^- Z- o- {$ T document.all.tooltip.style.visibility="hidden";/ i+ M# n/ `8 l. E- @) b3 x4 E
}
, e5 ]5 ~; b) \; B9 n3 \" l5 e9 ?! z2 I7 W: }! |; N* h
function setcolor(fntcolor,bgcolor)/ ~( f7 \: T8 y( r6 a. J- b/ k. ]
{
5 t- y C! F2 @ document.all.tooltip.style.bgcolor=bgcolor;
. @: x1 ^) x: q* [ document.all.tooltip.innerHTML.Color = fntcolor;8 b" `; }2 N6 R5 ~, W! X
}
3 [" D$ Z4 m( }' R: N' w5 w$ [$ X
3 m1 H4 B% p" y1 A rfunction showhint(text)
1 ]5 r, N+ D5 }- W0 n9 R2 N) s{
/ ^* u3 L7 @6 _0 F8 h: U onmousemove=showtip(text);5 O \( m8 h/ `
onmouseover=showtip(text);1 }4 r# O9 z5 g. K& T; `' H# ?2 ~
onmouseout=hidetip();
, @2 C* _# [+ J n4 h}( c- J# b* r% U2 ?( K& B
</SCRIPT>
$ A, W& R e+ ?( n& }8 w) x# D- z" F5 n/ h: {
, w& R! ]4 M9 ?$ X
) [) [0 f- k6 b" X7 R3 t' w5 p- t& R
, h0 Y4 O V% ~( m6 @6 L$ r1 T6 [! V3 p; h' c1 G. o: l" n/ K9 v
二：将下面的代码复制到〈BODY〉区: l. X! i* _9 t6 X( s. A( W* U
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
5 G/ [ Z, z: q X$ {, t0 tcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
$ F; P. o# V5 `, u+ e <tbody>
' e! p; C1 J, t7 i- m, o <tr align="center" bgcolor="#ffdfd0">
1 j# _- u9 S c( m( l' ^ p <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() 2 ?/ S2 M" a: d0 [- p) i0 w4 I
target=_blank>赏心悦目</a></td>9 x; b" C! _5 U9 f. C3 I% e) c
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" % m% } k& @& O; p# b; v/ U
onMouseOut=hidetip()>网页素材</a></td>; k+ W9 J( `0 Z- B7 q
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
9 a' o# E; k* L# S# M. c: n target=_blank>图像处理</a></td>
+ G- F$ ]* S5 w" o4 g <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 2 A) S. o5 x! ~& A% d" V M
target=_blank>网页特效</a></td># o4 l6 j" c# {2 b
</tr>) I+ ~" X# {4 L/ R- f
</tbody>
5 b: v2 \+ F, ^% G. x) J% M' t# c </table> |
|
发表于 2008-1-21 20:52
|