|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
! Q0 v$ _& e1 ?7 a2 ?( ]& y( s<SCRIPT language=javascript >
8 w8 N5 s* u& @0 I. K# T9 [document.write(
1 z7 M/ g2 G$ K* A; b0 G"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
( c' ~4 L- q7 _$ k" u! f;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");" X4 a$ U. L* C8 P
p7 A4 ~: } G+ l- W9 Yfunction showtip(text) //显示链接的说明
' V0 \! p# @" \' r# g{
! y& d5 u4 s6 p9 v; g+ ^- ] if (document.all&&document.readyState=="complete") //针对IE0 ?7 [) P( x4 O
{: m2 z: i$ Z J; v! l; m
: ~4 N" @; d1 i2 b. w0 b document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";3 v2 g: B) A0 K
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;; [0 [: P( @2 f+ Y
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
4 n) u! d3 X1 f document.all.tooltip.style.visibility="visible";
0 J0 w4 M# [6 N8 i }4 y, w9 ^3 @5 v0 ~
}
5 P* T. [ t5 x; d
F3 D' V) c( m+ F# B) Rfunction hidetip()
2 d' ~5 M8 Y6 g1 m{
* ?1 `$ L: X8 B' M/ w8 ]if (document.all)
+ U7 D& w: s3 k document.all.tooltip.style.visibility="hidden";- g) i( Q. ]8 d# D/ V$ F- B" {
}
, Q& |$ Z6 l; l) G$ V4 d6 Q4 @" j5 H' C+ G
function setcolor(fntcolor,bgcolor)) }/ n3 T. h4 x
{
7 V- Y; S. E' E document.all.tooltip.style.bgcolor=bgcolor;
! R, ~5 W. T$ G E+ L$ K8 j document.all.tooltip.innerHTML.Color = fntcolor;2 g* }9 {. d# s9 @& U
}6 [! A$ f" P( R- q- ~& o/ o5 E4 g
4 ^' ? \' G# O$ l4 i7 P7 c- q
function showhint(text)6 o( Y! ^: m9 |2 t' ~5 Y5 ?( {+ o
{
3 Y6 n- g" W, Y& Y. Q z onmousemove=showtip(text);9 g8 m1 p7 w$ `( V! }+ P- J
onmouseover=showtip(text);2 i$ y" @. n. t8 E7 e f
onmouseout=hidetip();$ {9 {' J# k( F6 C$ Y7 O
}. S! f) {, ?9 u" {
</SCRIPT>2 K, V- P& }' L: C7 G! S
4 b' A3 D6 B; l9 f
' O1 Z+ j$ C, s+ R& x
2 j4 v2 M4 L: M8 B3 [* q2 Z) ]
0 ~) o/ z. K' q& _4 s# @* l
) I+ |) P1 Q. _8 y6 \+ {- k' J3 x! V9 C5 z, q f, e
二：将下面的代码复制到〈BODY〉区( s1 N( F$ m9 T5 m( d
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
* ]& S2 h+ a( h" L8 ?2 L) qcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
T3 o& N- E& j6 k <tbody> 8 Z7 x! B5 [% C, N% J% }
<tr align="center" bgcolor="#ffdfd0">
6 A8 E$ L" H) x' f <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
A8 k/ G5 `0 s7 f4 \# @/ d6 C) i/ O target=_blank>赏心悦目</a></td>+ k0 p- Q( ~& `$ {8 R6 r" T
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
6 |, e/ u0 S3 `! |4 u5 Q onMouseOut=hidetip()>网页素材</a></td>9 W4 Y- ?& R3 M2 H0 s' H$ Q. \* I
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
. d5 O5 l A6 j0 f; ?: C _ target=_blank>图像处理</a></td># [2 c. x) _5 j5 v( E/ f
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() : e; C3 \7 I& U7 o
target=_blank>网页特效</a></td>
c U* q+ z0 f9 ~9 \ </tr>2 _0 T0 d# @ `" l
</tbody>
; e8 n# l0 ^/ F3 K6 a3 r </table> |
|
发表于 2008-1-21 20:52
|