|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
3 [3 g$ r) q+ A% R" O4 a3 w<SCRIPT language=javascript >
$ [7 W7 j$ n' u) |* b/ O, N9 Hdocument.write(. T! N" X* D- f U* D: }8 Z$ }2 h
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\2 K3 `' n2 A! u6 O& d
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");/ x5 V# z7 x4 s v- z$ `) {- X% B
: a2 `+ F8 }6 u, U7 J* y" `function showtip(text) //显示链接的说明
; I! J4 C0 A+ T# c4 R/ z{
9 U. s: g& C7 r3 R% J* s8 H( A if (document.all&&document.readyState=="complete") //针对IE4 Y1 ^1 n9 i) e, ^, \5 f& N( \
{4 L) x8 n! ~# r- k# L
, j9 V5 C- K, t8 J7 u document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
" M5 Q, l( b2 L t. G5 @ document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
9 R% k, f/ C. f document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
; Y' q, {0 m5 ~4 ]0 I document.all.tooltip.style.visibility="visible";* ^+ X. D' {7 @
}
) L8 ]$ L3 U5 w# E# O3 N}3 m G! _& R2 I1 d
- R6 \; ?! y9 R1 N$ c& Qfunction hidetip()
! k) E2 T2 ?% H8 w j{& |% Z5 w L( J. |% U) V& T5 a9 N! B, G
if (document.all)
i6 U/ I' P, V6 o2 D! r/ {: D9 M3 v document.all.tooltip.style.visibility="hidden";6 C" t9 w' Q' F
}
* _# R0 K9 r z# Y0 I% Y3 b: r# C& r% S- h
function setcolor(fntcolor,bgcolor)% Q2 W# j+ {9 s& t p
{
4 i4 l7 U! h8 B ?% b document.all.tooltip.style.bgcolor=bgcolor;
/ }0 G5 m" h9 H2 B K document.all.tooltip.innerHTML.Color = fntcolor;
- s7 E( ^9 _( E5 J! h7 f4 y}( _" c+ n' l" H+ c6 i' P
|7 d7 g' ?3 a' d! Sfunction showhint(text)
$ b$ U3 ?0 F) t{
% W8 t: l' o8 e9 o% p c+ @" [ onmousemove=showtip(text);) h! t3 s- U8 l* K7 x
onmouseover=showtip(text);7 o- h e+ q: {* V3 [" A
onmouseout=hidetip();
0 E, \5 O( D; b2 i y}! d/ c7 y. l0 ^+ s7 ]& n6 J |
</SCRIPT>
8 A y/ A( I1 b0 |9 @& G/ h4 ~0 \' O; M7 I# l Z
% X9 d3 G0 R/ u w$ u4 v3 E* T( P1 E' R! e% m6 V! F
( _7 y* T1 q, z, s$ K u8 E
8 }; c0 q) C: H K
: p* S+ D' q2 h3 ~9 n二：将下面的代码复制到〈BODY〉区+ ?+ v3 T) T" q7 R* [. I
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
6 C; @1 z& E E% ]0 P3 {" icellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">1 G6 `3 c* a8 N) X6 U5 ?
<tbody> * |* K3 _) w) g8 F4 g
<tr align="center" bgcolor="#ffdfd0">
/ V1 @ @ Z x0 v <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() 7 _" R( B4 X- Z1 i2 t+ o" E
target=_blank>赏心悦目</a></td>$ G$ h4 R1 m9 L+ r& h4 o
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
) Z2 b$ g% K4 ^7 i) M0 C onMouseOut=hidetip()>网页素材</a></td>
D! ^0 N8 g0 K7 _( [ <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() & x- ]8 I v4 g4 E4 D8 b
target=_blank>图像处理</a></td>9 _! @9 i9 o/ K! Z7 o& v4 ^
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
4 a0 g; a/ _ x$ B target=_blank>网页特效</a></td> K: G: n9 \5 R' c+ _
</tr>$ K8 @$ s% Q p6 Y( q' R
</tbody> $ i- o3 b( h6 @
</table> |
|
发表于 2008-1-21 20:52
|