|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
, J1 W. I9 c3 {$ g1 P, K+ s4 J( ?<SCRIPT language=javascript >
' `& I5 _& ]+ Wdocument.write(
l6 M2 H1 @4 Z' a7 A1 X"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
|3 X' V# N- X# V* F% E0 q. z( r4 _;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
) x! Z# z; f9 e
8 y" ^& b" N$ X2 c! Yfunction showtip(text) //显示链接的说明2 {, j" ]1 j2 \9 V# g5 O8 s
{7 F6 w# g% L4 M/ v4 |5 j2 T" g
if (document.all&&document.readyState=="complete") //针对IE
[$ w0 C, z8 S) L$ M% {1 ^ {
6 K5 U0 w8 K" [0 q h3 `, X( F ; Y( U2 [) `$ r W" r
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
' r: o3 w& [4 u document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;5 F* @3 E9 M' Z
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
! ^ ^: v) K, |+ q* n: {% a( W document.all.tooltip.style.visibility="visible";
6 D1 I2 Z% q% M0 O$ s1 n" n& E% U$ c }/ ?8 T# I/ ?, O( t
}
7 G1 G1 x" a ]$ l
. f' d9 |/ I+ N2 C9 \: hfunction hidetip() ! \! b4 u6 E+ |4 n
{
% G3 Z! } k" t' cif (document.all): O& u4 C; a" `
document.all.tooltip.style.visibility="hidden";3 N: e% z9 f8 S' J4 N) T
}
: E' N8 D* n r1 o8 R1 x/ v( V" c' A b
function setcolor(fntcolor,bgcolor) j1 s8 Y. n; E
{9 j* ]; ^$ L$ {: F2 d2 h
document.all.tooltip.style.bgcolor=bgcolor;
9 M( [3 O2 }! v- {" j* _% D document.all.tooltip.innerHTML.Color = fntcolor;
{6 E# ~2 I4 u! F6 t}
7 Y; I9 l3 I8 P1 `7 [0 p) W
, N, G D1 C" Y' t- h1 l$ Ffunction showhint(text)
7 w+ G% R+ Q+ n3 D; v% H4 m{
9 F' _9 Z" Q" E' [: q1 A) G onmousemove=showtip(text);0 x8 A. r1 U1 f% D6 L
onmouseover=showtip(text);
( c; k* F( G+ H8 J onmouseout=hidetip();" n- U; \) M: P7 f
}9 V! n& j8 W! p& R- _
</SCRIPT>
; ?5 W* _% ]$ ?; ?, L ~2 d0 c8 k2 z8 O! }1 T- }% |
# O' S/ b7 t( I7 q2 f6 n1 Y1 ^. S' I: F! W& x t' N- |% I
0 S& U; F9 e- z7 F: P7 j$ L1 S
7 Q4 {4 T( N2 R' V4 r. K6 X% T+ t& [3 s+ w E
二：将下面的代码复制到〈BODY〉区* D4 t& z6 i" H. S {
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 0 i, t& Z3 w% v" j9 b( N
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">( z5 Z2 n( }; a6 I
<tbody>
! B. \3 J' G6 V% b <tr align="center" bgcolor="#ffdfd0"> * Q1 X r* Z' x4 k. \4 ]+ k6 y
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() / M5 \& o+ C5 V7 k; Z7 ]2 j' G
target=_blank>赏心悦目</a></td>* L+ O% U/ M# N
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
7 v3 b+ u9 `/ Q8 s( s onMouseOut=hidetip()>网页素材</a></td>
) n$ |6 P9 ^, q1 Q; ^ <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
5 a6 X( Z% }% H2 m' ]+ B target=_blank>图像处理</a></td>
. a$ z! M/ W9 Z# K <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
. W9 \$ V8 x( ^* M target=_blank>网页特效</a></td>) L t* m* |; ?
</tr>3 C7 Z% b0 Y# ]% {
</tbody>
5 A+ {+ y* U& e7 a; R. e3 c </table> |
|
发表于 2008-1-21 20:52
|