|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间+ b' S6 G, F" g1 n
<SCRIPT language=javascript >/ K; g9 ?8 N& r6 L$ g- \) f
document.write(2 B9 G" ^9 X: }4 Q' V
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\- E H5 X1 c$ _4 h+ [9 m
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
! P; y; ^( B; r: A# v B
0 x r+ R5 l8 M: A( ~' b- n- _function showtip(text) //显示链接的说明
3 b/ L) J0 B9 [& b; P1 }{
% }7 M5 ^- Z$ y1 r7 {- E if (document.all&&document.readyState=="complete") //针对IE$ i' v$ [7 u( Q2 ~
{
3 }2 p. K! X8 ^) s- f
6 Q% k; l7 B. a7 f7 } document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
8 r' D# F8 K3 l6 N# P$ i document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;/ U% N6 I- P& {- J1 g+ K% H/ Q
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
3 k* i4 J' P+ N3 Q1 W8 \6 y document.all.tooltip.style.visibility="visible";
7 [3 j3 W0 {) o8 ]9 q }
" F" \* e; K; _& P4 O; x9 n}6 m) i! U: E" L$ x; s
e6 G& C0 h! p b: p; A+ v
function hidetip() 1 i4 k, T2 c9 Q7 ?% J
{
1 p4 v# i- Q- v+ z1 E* M! ^: [if (document.all)
4 @& e/ B9 J2 b8 |7 @ document.all.tooltip.style.visibility="hidden";: C; j8 d" ?4 s/ V! p# }) e
}
. e x. ?1 F, Q, I2 T0 {: h! T4 N$ x) F, S P5 T4 e
function setcolor(fntcolor,bgcolor), O9 @( C0 Z* s% x/ Z7 _ Y" g* ?+ O
{
8 S5 D& S# n% T. t* ? document.all.tooltip.style.bgcolor=bgcolor;2 w2 _7 r- }5 M9 r; L" b# _
document.all.tooltip.innerHTML.Color = fntcolor;
1 c3 a0 C) y/ J# D}
: h; Y- e: c7 _# y' `( ^. A/ T4 N" u# F C$ O) S6 U A8 I
function showhint(text)
0 z& R7 V/ a* i7 S& [# ]: D{3 v/ O' f9 F6 F
onmousemove=showtip(text);
5 f! ~% u8 a: W) v onmouseover=showtip(text);
* t0 S* T, L% X* y7 K3 ^ onmouseout=hidetip();8 }: X, ?1 _1 h4 d: y4 Z
}( G* M0 k# b! J2 \0 ~. b
</SCRIPT>
} z$ o- y* I0 \% e3 p$ h r# K6 L1 K. j/ l& f4 ?6 [
3 x& r; N; o( C% K j( `7 S) U
* n0 `% @0 l/ p
1 k; J! U$ k; T( L6 ]/ u$ s S
. D5 E1 x, |8 y7 e: n& u
二：将下面的代码复制到〈BODY〉区7 Y6 x7 W" A0 y* h
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
# c0 r! |2 V) |6 g7 T# Ucellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
3 Z+ c4 I5 L s8 j/ L! Y$ R* U; N9 ~ <tbody> 5 \4 j$ q8 S/ c8 O5 ?
<tr align="center" bgcolor="#ffdfd0"> ' ^& a! z: R/ s7 r& e
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
* P- {8 U. m: Q( z* H, I target=_blank>赏心悦目</a></td>
& \, q; M; Z! S" F9 s. E+ X <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
8 N2 F! t* T3 [0 }6 a onMouseOut=hidetip()>网页素材</a></td># g0 I- V* [* i7 J. ]
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() 7 S9 {; G8 s' Y0 e/ e
target=_blank>图像处理</a></td>
4 \7 T; a) h+ S _( P: n1 v <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
* O# ]) l5 R1 q# N; n" k$ b! N target=_blank>网页特效</a></td>. u7 l9 J- o0 D2 E, N/ z* m0 G
</tr>, J2 r7 V1 x, h& t8 r3 s6 ~
</tbody>
8 |5 ?# C9 o/ \2 V) {0 @# \5 ^. u </table> |
|
发表于 2008-1-21 20:52
|