|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
" I0 U* S9 W( H' n<SCRIPT language=javascript >: X: n) \- r4 J' j! K( H/ ?, t
document.write(0 b3 B+ _5 q/ `
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\ U9 I+ |+ @9 m5 o, C5 Q% {7 \
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
6 }1 e& r7 I3 ?- k# d. V! E
; \2 A0 [ w8 `1 h5 _! ?) cfunction showtip(text) //显示链接的说明
/ c2 d1 x. ~. ~{' Q5 r9 k% J6 Z, K, v- P
if (document.all&&document.readyState=="complete") //针对IE
2 q' Z: G1 E( l* C+ w: k& m; Q {: f" {( ^6 ` v, E* l: @
$ L" \* U' z" P$ x- P
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";" t+ X) R0 t( M, |6 W
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;* Q# m, Y* B9 V
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;; a5 M8 j. T. Y* n7 R( W2 z4 V
document.all.tooltip.style.visibility="visible";
9 P1 l- w6 c G+ v* a }$ j2 _8 @0 l3 m1 B4 {$ ]" l% C
}
" \2 |8 z7 ^. \( ~- V5 C" i6 L8 V8 R, B
function hidetip()
! o$ {4 J( t; N- W" l& j2 \3 _; m{7 P1 L. x+ \) |' c' l& e: {8 i
if (document.all)
, G1 z1 ^$ u( c& R document.all.tooltip.style.visibility="hidden";
- _. Z* S6 o& B& C}
' i! P* W& P7 q! L( f5 y Y% Z0 W, Z# w' E) ^' P: \
function setcolor(fntcolor,bgcolor)
! k" F6 T# f" y1 W# t" H. A{
1 p4 _6 s1 b! D document.all.tooltip.style.bgcolor=bgcolor;
5 F( t# ^9 ^) ^% @( [1 Z8 q document.all.tooltip.innerHTML.Color = fntcolor;
# J7 l8 p6 ]$ g; {}3 v: T6 `5 c6 w7 m2 t" o
; d/ J- }: _: N0 I+ r8 D, Q. Rfunction showhint(text)
, I! L0 v) X! o, V# L7 [{
r9 }8 u: w4 |; s onmousemove=showtip(text);1 E. ^# T1 Q7 Q" U$ d& S
onmouseover=showtip(text);
! K6 @( ?% `* a2 `; E onmouseout=hidetip();
, O+ ?* ^/ {: u% u}
/ k7 V( @* `: i. n I3 Z, z! z6 r0 i</SCRIPT>
) k" o- w$ m/ j0 E/ P: b# w4 @3 m& ~# k
# K8 n) ~' |& |' h* b2 m" J; M3 l; F" ?( @
2 ~+ r% R$ r0 G1 z7 F% w3 r1 F% o- ~" _4 W0 C1 b
6 q6 R% q6 b0 U. P二：将下面的代码复制到〈BODY〉区
( Z+ J5 U; L( O6 U* P<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 & P3 c0 r$ n# E, {" Q; d" n3 ~: [
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
# U+ f8 p3 l% N7 U; o6 J <tbody>
6 R* A" K# b; v9 V7 o, N- q* Y& ^ <tr align="center" bgcolor="#ffdfd0"> 0 D; H) ~( l/ S6 V$ G4 p
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() $ T2 P7 T0 E9 k
target=_blank>赏心悦目</a></td>5 ?' ^# H: Z; [+ U, g
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
1 n4 Z. Q" A1 n+ G onMouseOut=hidetip()>网页素材</a></td>$ E" F V, r1 V0 t' E
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
9 q$ h/ d: G* s5 e target=_blank>图像处理</a></td>
- N9 Q6 ^0 L) ?% _. b! K& k5 d% @ <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
. L# I. J4 z2 x# \8 v target=_blank>网页特效</a></td>
& V- ?! [( x! D </tr>) Y) S6 ~1 K/ N5 E% \
</tbody> . T4 T! R2 ^/ |
</table> |
|
发表于 2008-1-21 20:52
|