|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
$ ~% {, C( W9 r) j: o<SCRIPT language=javascript >
8 O' Y |3 A' R" W# w7 Qdocument.write(
- s- Y( y- F4 y, N* E) _1 H- k, f"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\6 a3 K R% v" M
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");! F1 Q! n9 Y( @2 f1 ~
8 }; _3 c" j/ K3 e% [
function showtip(text) //显示链接的说明! a/ K; N U6 H$ @. j* L
{6 I$ R. G8 K1 K5 W; U3 \
if (document.all&&document.readyState=="complete") //针对IE
& e. I$ @* r6 s5 k {
5 k3 Q, W2 s$ l# z, a/ j + K5 r5 X1 `: I o9 `$ K
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
9 |, z+ R2 F% I+ k6 p" Q, b document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
& B; |1 Y/ I6 ?6 m( T( X& ? M! u document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;% g4 _4 G2 j; |+ s9 P! X
document.all.tooltip.style.visibility="visible";
- N& \ E* a5 k" w/ I }
! n; w9 P+ J/ s1 a}) E- [+ v" G) F5 v. n6 f+ K
# l6 e2 k$ V: a% Y& \function hidetip()
& y3 B# l/ y# u& |) h; `{
( ]1 x% Q* j& uif (document.all)
" B* I9 {/ a/ N document.all.tooltip.style.visibility="hidden";
+ D2 t! K9 s. G4 Y' i8 \}% e" c! t! ], p$ A* n6 o5 Y) W( A
+ d! u# U8 u$ q0 E; wfunction setcolor(fntcolor,bgcolor)
2 q7 ~3 k/ E1 z; G" f{7 C% r) `3 I( L- G
document.all.tooltip.style.bgcolor=bgcolor;
2 T) W6 r! i$ m/ p: @0 ]( ~ document.all.tooltip.innerHTML.Color = fntcolor;
! W9 r3 O1 R4 n& _0 ] O: J5 d}8 U) `! F" V+ N2 U
9 f4 t5 }! Y" ?/ o. e) a: S- j
function showhint(text)" R( c0 z; o3 [# S% \; x
{" d6 G- X% K* Y: c/ A0 K' K
onmousemove=showtip(text);8 U$ Z" c5 p8 R" a. A
onmouseover=showtip(text);
4 x; t3 ^- r0 H onmouseout=hidetip();$ ]$ J, W+ l# S$ Z, C
}
# Y( L# f2 g! A4 w$ r</SCRIPT>
& ]7 B- H9 `! C& r0 H9 E
3 ^) u1 k. F7 Q' W7 T
$ o3 @- t7 o8 s2 w% T% I a
9 I) W+ g( k( z" m" K9 B: y4 \: k; r; r% z# \/ }- m
4 j; J* [& |6 p7 G6 d1 ?
) k2 n5 ?( k% g8 C1 R二：将下面的代码复制到〈BODY〉区
1 ?; a* H+ h; ~( q3 H& t<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
/ D/ m, \ W; l1 C T* V. Qcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
d- V# V8 n& a: u6 H [" | <tbody> " ~& c& M$ C7 g5 q* F
<tr align="center" bgcolor="#ffdfd0">
' n, W+ o" c2 G* m5 G <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
3 s; L6 o* q; f* J9 y) M target=_blank>赏心悦目</a></td>) e: b( [" Q( [* N/ V i9 Y$ E8 \1 z
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" , G# p2 e: x; H2 j. G
onMouseOut=hidetip()>网页素材</a></td>
* j4 z$ z4 i) ? <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() 2 X6 _" B; E: C- G1 C
target=_blank>图像处理</a></td>2 V" ]. T" f: x! G' L
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
9 y! @; o) S5 [2 {6 } target=_blank>网页特效</a></td>( D: h) G p) z& g1 m) B- `
</tr>% l7 V: f$ J" }
</tbody> ( {/ J) Z0 g" _" L0 o$ @
</table> |
|
发表于 2008-1-21 20:52
|