|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间& w% g7 t/ x% v) R9 X6 O$ i. ]. q7 l
<SCRIPT language=javascript >
' v' y" ]8 ]* F/ z3 y9 d6 T; }# zdocument.write(9 p1 c* _) Z0 p0 x! t( p g$ T
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
& u( a" b( [1 l& |% k$ \ t;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
2 T) `. u* \- h+ `
& _2 Q# T) R* k M8 P( A f ?9 ?function showtip(text) //显示链接的说明- G2 J; J( s; M) F+ M6 _
{! V; q8 b7 \5 o7 j& e
if (document.all&&document.readyState=="complete") //针对IE
+ Y, ~+ P' e R' M ~6 F {
* q5 k8 e' E: \% I; o) w ) @' Z) ]5 }, ^! |
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";: V5 I; _, s+ l. [1 g/ r9 J" k! k: }, J
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
; U" S- @4 h. e. g document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
1 e1 Q t6 W9 a document.all.tooltip.style.visibility="visible";
! r' T: S5 k6 U. s0 M) l }
, S* ~) S4 F3 U1 n) f}
; `- h5 S8 n) u4 u0 y& T4 r+ q9 h* z$ b) |4 f$ F4 u
function hidetip()
5 s+ I* u9 h9 V! n: J{
5 c$ w8 s0 h8 s+ u: Xif (document.all)
4 p# P P4 R3 G& A# s document.all.tooltip.style.visibility="hidden";
$ g: Q; ?6 O6 \) q}/ Q/ ]: }! X& B! E* X& e- g3 r
) D& X f2 K P% afunction setcolor(fntcolor,bgcolor) }+ q( D8 P& X5 i! D! A Z
{
4 j2 }. Q. ?- L4 ~: B document.all.tooltip.style.bgcolor=bgcolor;
7 h' I3 o# h6 A! X7 E document.all.tooltip.innerHTML.Color = fntcolor;8 I6 M# a+ p& A: e( p- c
}3 f- v# e. ^2 B9 R
- v8 U p5 D* K0 R3 X2 E& [( O
function showhint(text)' x. ]" @4 v4 n% s% E$ N+ ~
{. [9 U8 d$ s$ }$ ^7 F! ?8 ?# F# D
onmousemove=showtip(text);2 ~% ~" |- C: ~/ V6 L
onmouseover=showtip(text);
7 b/ {4 V) L# c2 Y onmouseout=hidetip();- _# U' R$ a. K. U* o5 j
}
. f' |9 a% s' a7 l" S q% D$ L</SCRIPT>- B. a( @2 p; m: j6 i4 k
% M: K1 x7 s$ u$ ]4 U' p, k* o2 L# L& o# e0 v7 g
% Q/ K. j! y. I5 w X- _
6 W1 E( L( u/ o, j, e
8 j' F* g3 C6 q0 R. H) D4 ~2 Z( w s& [( \7 u7 w
二：将下面的代码复制到〈BODY〉区9 @! C! F% i3 F6 H5 B% `6 t
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
9 e/ c1 Y4 j; f" O# H5 Vcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">1 j; O) z# z. t0 r& b$ h
<tbody>
1 ? `& g( `# y m8 n <tr align="center" bgcolor="#ffdfd0"> " }- L$ y9 _% r) y% B4 l) d
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
5 P' L5 u/ p; J; T) ]3 c target=_blank>赏心悦目</a></td>9 x/ f0 X7 O* ~9 n0 A1 F- G7 i
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" & l3 C- }( g7 c) {
onMouseOut=hidetip()>网页素材</a></td>& o3 o! F( |, r( m% Z; F/ ]% \
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
( t2 t: w/ D8 P) T target=_blank>图像处理</a></td>
2 Y( t' c) h/ d8 O9 A# A5 n* ? <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
" ]6 ~4 Q3 T1 k8 B target=_blank>网页特效</a></td>
( q4 J6 y8 P* X3 o3 _ </tr>
* [; V2 {- l# N( M y </tbody>
% q2 o: Q$ d! k, u6 a1 A </table> |
|
发表于 2008-1-21 20:52
|