|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间8 h" ^" y5 b' o
<SCRIPT language=javascript >
% e, A s" n4 z9 l8 J# bdocument.write(
) R5 y5 m; X3 d) o+ a" [% X"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\8 ]3 L' A7 ]1 z. q7 d. ~
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
9 e+ l6 E) Q; n5 s9 U7 [3 n5 U8 K# |) ?" Z. M/ E1 j0 C
function showtip(text) //显示链接的说明, o; B, m9 w9 Q: k% O. ~
{- p0 o$ v( G7 S6 Q
if (document.all&&document.readyState=="complete") //针对IE. [% R) `( B/ g( g/ F+ Q
{% K& W e4 ^8 F, R
5 f/ }7 l! M. V2 G# m3 T document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";8 T% y x& r# K; w7 h
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
. N0 Y3 Z/ {% k4 c3 b5 |% G5 Y document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
0 F" Q/ K& h5 M document.all.tooltip.style.visibility="visible";- |- o0 j( s) i/ a
} O9 b# Y6 K( A
}8 e$ i) O+ z5 ^- d9 `0 ?' s9 o6 h
$ Y" B0 D) A% s$ h( @! j8 T. {% hfunction hidetip() , O( A9 n7 H6 @
{
3 t% {" E$ q' |& ^$ l7 m/ N% @if (document.all)
( M3 J8 m/ N+ d document.all.tooltip.style.visibility="hidden";: O1 E0 Y# o# F1 g$ o- O4 d0 t5 X& c
}7 F0 P) r& o" E/ Z
) _& r. e- p: g/ A4 ]function setcolor(fntcolor,bgcolor)' I" h- d; K. W# q) D" ~( G
{
( Y' h' y, y& l1 b/ _) | document.all.tooltip.style.bgcolor=bgcolor;
$ b$ W* Y+ i4 I! z2 s4 Y& R document.all.tooltip.innerHTML.Color = fntcolor;
/ |& L' n. p0 N, j6 L4 w}
$ [( A9 b; |4 D% W( u. U5 T2 S7 C! p0 @; ~5 ^5 ]
function showhint(text)
5 O; j9 D$ }6 Q5 o1 X$ @8 \{; x3 m8 _/ O$ g" f, }
onmousemove=showtip(text);1 B( M9 @. d$ T7 A) x
onmouseover=showtip(text);
: l. |4 @ {* V" ] onmouseout=hidetip();
6 t0 G5 B- T. ^" b5 N}
" |5 b: b& M- g( V, I</SCRIPT>) ]0 _$ N, [( _" p8 O$ |7 v4 B+ x* Q
* S/ @4 l( R& w) D1 e8 b
! B4 K- a: S) O1 k" T, w/ O; R# Z7 ^3 `6 D- G% K
G) ] d3 t9 a; x# D
( |" Q6 `& O! }$ b. [7 d' ]3 e7 A! E2 L; G8 ?
二：将下面的代码复制到〈BODY〉区( f$ [' j/ y4 i8 o T
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
; ^$ p5 q3 T: d$ H7 ?cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">: C$ s; U% O+ H$ l/ @( n( N
<tbody> % J* u% r0 W4 o0 ?9 J( Y" ?
<tr align="center" bgcolor="#ffdfd0"> 5 P4 [1 I+ ?1 ]4 \0 `7 a
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
1 C6 {8 ^, }. m9 z( ?1 w7 U0 g4 i target=_blank>赏心悦目</a></td> k) B( u0 B% B, Y$ g
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
; C# {5 a% X) [6 p onMouseOut=hidetip()>网页素材</a></td>
. L; U$ H5 R. w6 R8 q+ Z2 W <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() % \4 s; H5 w8 X1 p1 Z, m
target=_blank>图像处理</a></td>! z3 N5 o M# a2 i( e: ?
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 1 v* h& t4 B& C: F7 C* x1 i5 I- w
target=_blank>网页特效</a></td>! a0 P% d1 {: m" _+ b
</tr># q5 n5 K8 S6 D! u8 B; p) t
</tbody>
9 o1 ^& G8 I6 w: j! R </table> |
|
发表于 2008-1-21 20:52
|