|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间/ ?8 S+ ?( r2 c
<SCRIPT language=javascript >( Z) P+ O' M3 R7 r! t; e! b4 J# ?
document.write(9 [, [4 R. V: B- D
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\! u5 w9 I8 v% |, O7 g+ \1 q! ]1 ]/ N
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");6 M8 Y! g0 t( h6 G$ N
. ^& B7 S9 U: f; A3 s. lfunction showtip(text) //显示链接的说明- I2 B7 x' [- |% G. h% e6 \
{$ |0 G1 t! ^# A0 r8 O$ r1 V
if (document.all&&document.readyState=="complete") //针对IE! k3 l6 g- g2 y& k8 z; M; Z. F
{
" ~6 g1 B0 B& S2 Z, K) P4 u
+ r) u( j1 [) K3 T& w document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";# S* I! D4 S; |9 Y4 c) Y
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
) Y. A5 }" {( y* Q- I document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
- R q" P/ K+ f: m _$ ~ V4 Y5 E document.all.tooltip.style.visibility="visible";
3 `- N ^+ |; A. f9 m }
- o; C4 @- H7 Q: X# O5 D3 H' \}
. O7 n' |7 Z" m+ O6 p5 d
H6 F7 r* g3 e1 @8 O6 rfunction hidetip()
* q5 Q) ^/ ~; S{
# N* `* G$ Z- ]if (document.all)
. P* t8 R6 H( [ document.all.tooltip.style.visibility="hidden";
' c5 I0 J; u0 C5 A% A/ ?9 E) h}
, L) L( a3 _7 U/ d8 c
0 x( R( t/ B. d" B! j& A0 {function setcolor(fntcolor,bgcolor)
" J+ ^ q& g. ^' ^. C( V* K. s{
4 x9 J: z j8 Q$ x6 q document.all.tooltip.style.bgcolor=bgcolor;
4 Q7 H$ j# }6 E" l document.all.tooltip.innerHTML.Color = fntcolor;
?2 W7 C6 _6 H) _+ [}
: m; r% a0 F) Y8 [- S( [4 z$ }2 ?6 V- ?& L& w
function showhint(text)9 ~! m2 G) X' K1 S" q6 l5 y1 r
{
1 l) L2 P" m4 r( \: z: S7 O onmousemove=showtip(text);: \& Q) n6 \9 h& c5 F' I: v; ~+ C7 y
onmouseover=showtip(text);) C/ Y$ Z" T7 e
onmouseout=hidetip();& ?# R$ _) C$ X4 b/ }- {% Q$ Z
}
3 F( g8 ?; F2 L/ K2 C$ u</SCRIPT>& o, @1 ^4 i7 t- d/ V1 {5 p7 i2 u: t
2 a( h3 a1 W, V3 p
* g1 l5 \; |8 ]" |
4 H7 X, M- |% P/ ^) @9 j! D9 _5 |1 T% V) J8 a: w7 L0 G
; |7 A) {: \6 D9 N
- }% B6 B" N; h. {" r3 c二：将下面的代码复制到〈BODY〉区6 n, T: ?5 s0 c: O
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 1 t1 ^; p& |. t/ I& e! `
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
3 r3 L) I; W4 F8 l <tbody>
7 E4 q _* [( ?) l <tr align="center" bgcolor="#ffdfd0">
4 ]* m( `7 k2 y; s. e& V; N <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
* x: Z3 z8 O$ n+ m1 B3 Q target=_blank>赏心悦目</a></td>
. Q5 n" h5 C _% E& B; ^- y <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
* r/ Q2 p4 T% O/ \) z onMouseOut=hidetip()>网页素材</a></td>) E; G2 b- |+ z j _* P6 X1 O) Y5 E
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
- n" M0 Q/ n1 ?% {. g target=_blank>图像处理</a></td>) x3 c8 Z8 q# z0 Z( P2 U
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
- R. f& U5 y0 x. ~ target=_blank>网页特效</a></td>
" I' v$ N6 ]7 ]3 h7 U7 ` </tr>/ @1 C7 [" V* m5 s$ p% y
</tbody> ]. R8 R0 a, c" }2 U d" f
</table> |
|
发表于 2008-1-21 20:52
|