|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间1 U# j; Q0 A: {* t
<SCRIPT language=javascript >
) W$ t6 `7 m7 e2 E1 @8 ]; _% kdocument.write(' M' n4 j" N, `
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\) A5 M! T3 M+ ], J, v; \
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
D. ~# W9 T: y: N* I5 ~3 v8 p- y S8 A. ?" E
function showtip(text) //显示链接的说明
, q0 r6 v/ y/ v7 ~% @* ^{& V' c4 |- a& n7 t: I# y: Z: z X
if (document.all&&document.readyState=="complete") //针对IE* x* K( u0 I, @( \) F3 n9 Z! O
{$ \% R* S1 f: X: s
7 X" G6 e! [( w7 N
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";; F& h* y! [$ T
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;- s: u$ }% G+ w8 w- p
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
+ u) e9 `# i) [ document.all.tooltip.style.visibility="visible";
* B2 e' x8 J- h/ q' i$ T }
8 i' M: C9 V" R8 Y: r}
' G5 P% O6 U" y5 M. L+ a0 I8 F
- N# r9 O6 c+ A: T7 s+ \0 Gfunction hidetip() 8 F' X( u y- }" {& Z% V/ ^, R- j0 h
{1 S/ C" A. e+ _' G
if (document.all)1 p, O) R2 u+ Z
document.all.tooltip.style.visibility="hidden";
' w$ H. [* V0 O# l( A}) I) |% D7 K: R# C9 o) M: U
. t# I5 | O. J n/ d) v2 R
function setcolor(fntcolor,bgcolor)
/ _5 x" S* H! g) r: C7 l{
1 w( m! l2 R8 }7 M! }% n0 C; [ document.all.tooltip.style.bgcolor=bgcolor;
. x" H, t# q, h- i- \' W document.all.tooltip.innerHTML.Color = fntcolor;
5 W+ T; K2 }" E9 [ G1 j# C$ K}+ S3 l: ?+ b \: w0 m: [6 H
, l. b9 n0 P3 b2 \# K. w+ H2 k# p0 Gfunction showhint(text)! f( g* S3 h0 Y- e! F
{
: j ^# t! w* L( N, ]1 Q9 E$ G onmousemove=showtip(text);
2 I. R: B2 U$ D/ G& H onmouseover=showtip(text);9 F% y/ x5 G) p# s
onmouseout=hidetip();
6 H6 f. {! N$ D7 B( k! e}
1 o2 {, G0 _/ l, ~; e</SCRIPT>, y: G3 m/ K4 A6 r+ r9 i1 Y# k. U- {
* r, }3 C/ `' q7 `+ G t8 i; x4 z) j( N7 |& S. v" T/ X, t; R7 V7 c
* b0 h- s) @( G7 {: O, i6 i$ d+ ?. ^6 Q o m
" E( |1 Z1 F7 V; L, }1 d7 Y; Z
1 {+ `9 w- |4 W二：将下面的代码复制到〈BODY〉区
6 e: X; `% X6 r. p/ j8 e<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
4 S/ U4 d- t5 g# R2 l/ R6 `% l% H" zcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
: T! a) r7 Z: m \ <tbody>
. }- w! V6 `5 O- ~ <tr align="center" bgcolor="#ffdfd0">
' L) B% G& Q0 q <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
9 @) N1 E# J5 u8 p6 F( Z5 S target=_blank>赏心悦目</a></td>& F8 L9 u& R* M% T
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
e& ]: J: _4 Q9 K$ T onMouseOut=hidetip()>网页素材</a></td>
4 P* ?, J! b9 W4 ~ <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
/ `& }' X( D# }3 G9 g target=_blank>图像处理</a></td>8 A v6 P( }6 a0 ]$ i) Q
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 3 E% F5 }6 U0 F* X; ^
target=_blank>网页特效</a></td>
+ P4 B. r" x! e- D! H# v </tr>
* `9 U; f% S; M! Q </tbody> 1 z M# I7 f, e* N5 I
</table> |
|
发表于 2008-1-21 20:52
|