|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
+ ^3 ?' a& Q& y* z6 p<SCRIPT language=javascript >" u. y8 t, q" p+ x& p
document.write(
* o7 N: H" u5 z3 e) Y8 v7 X"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\; l, M5 }+ P0 \- x6 C: u
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
3 O* H/ K6 b* G8 p: G; n/ q
- E, G3 d+ H# H( K) I: ?& wfunction showtip(text) //显示链接的说明
0 T' P- \( K+ v( Y8 O% X8 `4 u{
) \% I1 r. _; J% ~: D if (document.all&&document.readyState=="complete") //针对IE0 t+ F( H, j" u d; v
{2 j" Y& ]& u3 i7 C2 _- M$ [
7 E2 z' @0 b/ @8 A0 C5 m1 a$ s
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
& k2 N& L# I7 `& m document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;3 Q4 g$ b0 g% t! H$ V
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;" D/ T8 u3 U% O* j, t
document.all.tooltip.style.visibility="visible";
5 A, S4 \. Z7 ?3 w6 n; v) `, O }" t1 Y6 U; |2 r8 Z4 D3 L
}3 r' ?3 h/ S% ^$ G5 f8 Z
- A6 `* C# C$ { |9 P+ O. `
function hidetip() 9 ^; E/ @/ c2 u* b" m; k7 n
{' t: v, _+ b4 M
if (document.all)
* V, [6 [$ L. h D1 R3 s1 L, n document.all.tooltip.style.visibility="hidden";# B. f h4 z$ Z# J( {- @# Q
}) B( d9 r3 A8 ?0 l1 o7 m
0 ~9 E$ Q$ R9 w' r) ?function setcolor(fntcolor,bgcolor)
; `7 w/ _' j( g2 F9 H8 j1 `9 }( j{) V. y9 P p7 g. D0 B
document.all.tooltip.style.bgcolor=bgcolor;
7 j L7 o0 r9 W document.all.tooltip.innerHTML.Color = fntcolor;/ T3 g( X j, U! ~) I' Y, \; q
}
4 h! `- C6 B6 k* r
6 c% q4 b8 j3 o: k' Nfunction showhint(text)
' L2 p* y6 p3 C+ r& ~& y% i{
7 |9 Q( ?6 _+ h, i( x' n ~ onmousemove=showtip(text);% M# v6 c- K' i4 K
onmouseover=showtip(text);
; l) H8 G. T4 E onmouseout=hidetip();$ N/ F) l6 L! K" ^ g
}% Q0 d/ i" W1 ^9 ~4 {
</SCRIPT>! k1 T5 p ~) n9 x7 }
' i7 }8 g2 E7 ^( D) q
# b3 h D3 o, H7 j; j0 r
+ `- M2 w9 k+ D( T* V
7 ?( M* B" a) u; B7 ~
B& g- b1 `! g' e! V- C; _* j5 X* g- \& ?9 {
二：将下面的代码复制到〈BODY〉区, b: d1 |# p) W `
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
: E8 x3 g7 _$ d! l: t/ hcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0"> U5 j) K: _2 {! b# R2 C
<tbody>
; g& a% f% G; N3 c# f+ l4 i$ T <tr align="center" bgcolor="#ffdfd0">
- v8 H: l. B" M: M7 R <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() 8 R1 z! J9 o; M* ^ M
target=_blank>赏心悦目</a></td>! B. R, ]" R8 n o
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
/ O4 p1 u6 [$ a6 t& O: L5 o onMouseOut=hidetip()>网页素材</a></td>
$ Z6 R- n# a# }( v3 t <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() % {3 }2 c0 e9 N" u
target=_blank>图像处理</a></td>3 Z) Q# w. y2 z: m$ E6 w
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 2 e3 I* {0 d( C+ V" b
target=_blank>网页特效</a></td>* A& z3 g# y1 i& L$ [7 t. S5 x
</tr>
3 Q [1 y, D& n </tbody>
4 y2 L' Y. @5 P2 o7 I! p7 o& e8 ] </table> |
|
发表于 2008-1-21 20:52
|