|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
4 Q! l; [! v* Q9 Y+ }# z<SCRIPT language=javascript >4 E1 X9 V5 u' u
document.write(
- ?+ j. Q& r' G; U$ r' _- Q, |"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\: B9 j' |2 s4 G3 g9 w9 T" K- M2 o- U3 B
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
+ X c. G* D6 K& ^! a, R- t0 ~" ^$ g" _9 k0 J8 m2 w4 L
function showtip(text) //显示链接的说明
! c, `; J( _' ~0 V{/ @$ M+ j4 x; ?7 t
if (document.all&&document.readyState=="complete") //针对IE
1 F1 W0 s' p$ Z1 Z {
5 a4 D/ i6 b* u! v a5 T # d. s( \9 O; l+ @
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
' @, U- ~8 K! x1 A) S document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;9 a, ~/ t: _; v$ O
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
- W7 e3 T1 A2 L6 u: o document.all.tooltip.style.visibility="visible";
8 f; i! V* q* y; D! S9 q4 t }
7 I2 ?2 h4 Y2 w9 L9 G}+ m1 s1 M1 ^& p0 {
5 N3 r& j; D3 S8 I+ ?; l
function hidetip() ) ]2 ^" |; J# X8 ]- Y
{
. M) o2 Y! F1 L9 G; Yif (document.all)
3 e/ _% L p0 p- A/ ? document.all.tooltip.style.visibility="hidden";
! N R9 n$ @% a$ p& I( |. h0 x}
" X- E! V- O& _; o3 o" c; n4 o4 l _; a. K z Q
function setcolor(fntcolor,bgcolor)
" Q$ W }& M' ~ K! |{
' i" b6 a( T7 J b& L6 J document.all.tooltip.style.bgcolor=bgcolor;- i$ S3 K5 p( Q, \0 d
document.all.tooltip.innerHTML.Color = fntcolor;
7 G; H# ?( V% k/ }}
; R( ]* c6 u6 t* u7 ?9 V. q
# L: s, V* ?( \: rfunction showhint(text)& ?% G0 R0 \, f
{
5 s! o1 { b3 y) t( N onmousemove=showtip(text);! w# k4 y$ c# {- f" C5 M( }; o" C' ?+ k
onmouseover=showtip(text);
' L! } V: D/ Z4 e onmouseout=hidetip();
: y. k6 R+ J7 S( y, p& f}
+ g, W2 Z* g3 \</SCRIPT>
8 Z! {* E2 S: ~) [
# f+ V- O! G% d# h3 }' o: N, o$ {8 x( |+ _2 R; x7 M0 E& X
7 r% O0 o/ U" r7 p1 n! e
3 r! C. Q4 @3 p% M
+ v. M; p& K+ ~. \1 f1 K: A( I3 O7 t8 j5 @- o" T' _
二：将下面的代码复制到〈BODY〉区5 b0 I: V8 B6 Q5 D0 U
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 5 t3 {! O) y' Z# `* s; n
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">6 {# h' |% Q& j9 [( \
<tbody>
9 J; {( H8 j. y) x <tr align="center" bgcolor="#ffdfd0">
2 ^4 I' Y: M) }( ?/ \) G; b <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
4 t m% F6 x7 y/ y0 [8 B( c/ U+ H target=_blank>赏心悦目</a></td>3 v8 r% c4 ]) p* B5 A
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
( a+ r1 _/ @" a6 } onMouseOut=hidetip()>网页素材</a></td>3 ?- I# K1 W: V/ r. H. |
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
: G; T, i' u v target=_blank>图像处理</a></td># S. S4 h. K# O1 m. u l) v% j
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 9 w% D4 ^# b- a6 O I% ]( G: i) V
target=_blank>网页特效</a></td>4 A( _! R- P4 a7 D+ c$ i7 Z5 [# H
</tr>
1 u' K' R: s) I </tbody>
# d* d( H3 D4 B3 e </table> |
|
发表于 2008-1-21 20:52
|