|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间' Q( w0 o. F7 u) R5 I p
<SCRIPT language=javascript >
6 K! y) l+ [) G) {document.write(' p+ l4 Y. R) D, K
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
) ]; {/ k+ y6 j- b# l5 f' e& d;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
3 F) ^1 e3 L' ^# q% a' ~: R% g) R1 a4 w( |* A* O" L/ e
function showtip(text) //显示链接的说明 J: j( b8 _4 g% H5 g
{, d. a: P! m8 ?6 w1 l# i! X, T
if (document.all&&document.readyState=="complete") //针对IE
* y2 i, R* v$ h" e6 e N1 u {
1 o# q( W/ w& w 6 Q8 Q9 g9 t# r. C5 T" ^ ?! p
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";) }2 {/ q2 f! ?9 }' y. x) y9 z1 E. Z
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
& m" G3 d& D4 [' l' i document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;8 i. [ O3 d& W+ x2 N* Z5 [& {
document.all.tooltip.style.visibility="visible";) j* D# A+ C6 c- s" `, I8 k& x1 F
}
4 Z/ O9 k; a5 h! V% y: `}
" y0 D$ X0 ~* a/ R; h* u( t) N t
% w) f4 R4 {# q+ g0 dfunction hidetip()
5 R; X; Q, Y/ T{
" F w4 `& W9 C: [/ aif (document.all)! N9 o6 _& |+ o$ T( v
document.all.tooltip.style.visibility="hidden";
; n5 j! \* o2 A7 G/ a}; z3 U' a1 E) t( `* v6 F& O$ }
$ b; @6 Q4 D4 b! Z8 L* X$ ^
function setcolor(fntcolor,bgcolor)' z+ ^7 h' @3 \5 x3 g* w
{
/ v$ |! r E/ u9 n$ W8 ]: Z document.all.tooltip.style.bgcolor=bgcolor;. w5 Q2 @3 Q7 V- P6 `5 V3 q
document.all.tooltip.innerHTML.Color = fntcolor;
! u% U) } N9 v* B$ v# L% E}
) h& k `/ \& R) ]4 Z6 h [
/ P7 k; T2 f# D0 t$ H& q7 Lfunction showhint(text)
9 e: q# k% r! n) E: ]# v, L{
2 ?7 `9 P) z. y; O! `8 m( S8 d onmousemove=showtip(text);
5 Q; f- I9 G+ Q8 y1 H onmouseover=showtip(text);
3 A* N& E S' b2 ]6 F h onmouseout=hidetip();& S4 a1 p+ i" Z7 |
}
, ^ F0 W& Y3 x; O3 V/ }</SCRIPT>" I/ c: U1 J8 S4 B5 @- w8 K" k
: J6 L( j: [0 P4 \" c2 m4 h
" k- B! K) r( O8 R0 w# V
' p2 C5 Y. d4 J9 {6 \/ x* Z
1 \; L6 J5 W3 G% w
( O; e3 u$ D' x5 {
0 D" C$ D# L+ x$ G6 Q! s# |" ?3 }! g二：将下面的代码复制到〈BODY〉区
* }0 x$ Z8 v/ _0 C& U' u( J4 c<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
' J# { V" ]; J* p' n9 Ycellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
9 z$ P5 ?8 U: G2 O0 ~) ^4 W <tbody>
8 n5 |3 K1 k1 H9 _, Q <tr align="center" bgcolor="#ffdfd0">
* p6 }) E9 M8 r7 c <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
/ ], p; z+ p5 e/ |9 f6 P target=_blank>赏心悦目</a></td>$ \7 O( D- l* K' }% x
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
8 ?4 A- X2 b7 G5 c onMouseOut=hidetip()>网页素材</a></td>3 P- A; _% A. f0 j
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() 5 A2 e% ~9 c e
target=_blank>图像处理</a></td>
) Z2 G! ]8 A1 z# S- X' R. C0 z1 s <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
/ F, U& Y3 ?7 v! W( @; u& X target=_blank>网页特效</a></td>1 J: \- N/ L0 w! k' B7 o
</tr>/ b5 j) T, i f3 G0 F+ l8 e2 C1 y
</tbody>
( r [: m- M3 {' E C5 u7 ]7 ` </table> |
|
发表于 2008-1-21 20:52
|