|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间' m6 C7 M' V( @4 N3 l1 l
<SCRIPT language=javascript >
! u! ^: c, c2 e2 f- bdocument.write(
3 b; K, O9 r) h, P" P$ g"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\: U: \! z4 x1 _* M
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
8 F' v w" U0 e, ?% _1 ]+ J3 n+ V4 N
/ j6 u( Y; [+ n" `% wfunction showtip(text) //显示链接的说明+ e0 t8 |2 i! i$ H Z4 S9 @! q( ?8 L
{
# ]$ d& B S C1 ] _2 d if (document.all&&document.readyState=="complete") //针对IE
# E ~! g; R/ d: j2 ^- n {, O ?0 \; ~% K( m
9 j1 L- `1 {3 I" G* p% x5 b
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
& \- Y9 ~- x. [, G8 @ document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;: Y( l: I" W- H) p: ?: @
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;# p3 v# [) i" ^0 Z. o& o; \
document.all.tooltip.style.visibility="visible";# L4 s- y- U1 t$ x& a- ]' B
}) _" Y. R5 }5 D8 S
}
3 R5 s0 k: x- A+ O. M
+ U$ W; Y2 P; ?8 Vfunction hidetip()
: V' x: q' E% h$ r# q. m{ a( b( t6 w" v% \
if (document.all). ?4 N& j+ I1 U" ] }
document.all.tooltip.style.visibility="hidden";0 q1 s6 A3 r/ `3 A5 O; t/ @# j
}
1 m% T0 S" a/ e3 g* A0 F+ z
7 B) z0 [" e- f) U' k# Vfunction setcolor(fntcolor,bgcolor)
. _* r" Z* l7 K) }. ?{7 t. @% p- q% D, h9 C" p9 _0 {! m" L1 B
document.all.tooltip.style.bgcolor=bgcolor; H" ~7 g _9 C5 W5 p$ _
document.all.tooltip.innerHTML.Color = fntcolor;! o+ @7 o J- S6 U0 N9 `
}
8 d5 O1 U: t% [" E7 Q: f& N0 \& U& _# P5 ?- T J2 c
function showhint(text)
; T& h P/ L8 z# T6 ]+ j5 B{( u. Y9 k3 D4 z9 P3 Z
onmousemove=showtip(text);' ?/ e4 F; ^8 P. s v
onmouseover=showtip(text);" f5 }9 K7 R0 m3 G7 q% a
onmouseout=hidetip();7 B9 G7 y9 M, [/ \' N7 W
}
: e2 m! r( \1 O. K; K6 R+ J! ?</SCRIPT>/ N" G* W' `9 a' e- H
8 z/ T/ r+ b V0 F: M
% ^3 n. Q: @# ^) v( @" W3 O+ }5 z7 d) Q3 ]
) F @$ C. O: G5 W* k$ j
% ^& j* D3 R/ S- L% P m( m5 A7 \6 X: T. ^3 p" Z
二：将下面的代码复制到〈BODY〉区
* s" Z) K6 S' C+ ?<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 5 ~6 d: W7 I" g! ?5 M+ D# v
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
9 e5 U& T% }5 G9 ~: S! r <tbody>
& e& G' j4 l% v& V <tr align="center" bgcolor="#ffdfd0"> 9 R3 @& M! A, M9 F, t8 |
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() / |, O8 _6 K4 V9 b. f: _
target=_blank>赏心悦目</a></td>
5 u8 |4 o. q* g, v/ X <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" 1 j) u- J" Z/ [; H& Q1 u7 f- `* p% w
onMouseOut=hidetip()>网页素材</a></td>5 L3 j. T* J( S: e O g4 F0 n7 u* J* J" M
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() T3 d3 Z$ o) @" T" l
target=_blank>图像处理</a></td>
! T, k4 K7 n' a+ R( Q: [- X <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() & n& E P& D9 m: t
target=_blank>网页特效</a></td>6 M" o6 S9 V% ^6 \& |3 E4 g3 P+ r
</tr>
9 y3 r0 J, p, ?- Y4 q8 b* ?+ i </tbody>
+ ^ \# j5 a& O- c# I x9 Z </table> |
|
发表于 2008-1-21 20:52
|