|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
6 a: @2 o. t/ u<SCRIPT language=javascript >
- u( F4 s# P+ }! Ldocument.write(
) I. c' W @) [; S9 v) S; ~5 p"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\1 R% A* P8 j8 \" H# A$ O
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");' z4 Q% H L2 j# R
! p: i9 N Z7 {7 [6 [! t
function showtip(text) //显示链接的说明
/ {0 ~& S$ D$ ?- G{
0 [, q% T( N& @- j$ q* I if (document.all&&document.readyState=="complete") //针对IE1 H2 Y$ X4 o6 a$ g& {/ W! d1 t7 P
{+ T# N; U, q! ~, h* G( q3 Q
8 C4 |5 c( T. \( f+ Z* _* ]
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
) Z) h: @9 o1 E/ z% I) P' c document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;" v# F/ N& F+ W) {! P" [
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
- y; O3 h4 B) d# x! J document.all.tooltip.style.visibility="visible";0 K) @8 n+ O& }3 j# b Q2 C& K$ y
}
1 a4 a. j4 |; ~# j( D}
2 s9 y9 @7 L! U) U/ G& n( r" j6 Z: W$ _6 E+ R! I$ A
function hidetip() / @ U+ r' y7 G* z* H
{
' i& E4 l3 o4 \; _! i/ ]if (document.all)1 `% [9 B3 X( @) k
document.all.tooltip.style.visibility="hidden";
9 P+ w2 N' `2 w* S0 m}( q2 O# i& I; X6 h
6 m4 X# v* z ?function setcolor(fntcolor,bgcolor)
( }9 s! I" R7 ~, s: f9 N5 ?- Y9 q{
4 m8 H0 E. X. Z% I# K0 H8 S6 V document.all.tooltip.style.bgcolor=bgcolor;
9 e( j+ M( B8 A& m2 N8 \1 P document.all.tooltip.innerHTML.Color = fntcolor;9 d' t& a0 T' R" N$ G: G8 V
}
- K& p$ s. f: J8 ?& I1 D; k4 F2 H7 p! w4 \& X" }7 P
function showhint(text)1 _( f7 b( C" X; ]
{( w1 F; d; v, v4 d
onmousemove=showtip(text);
# [# N7 M6 U% N- T4 |, Z' E) m onmouseover=showtip(text);9 D, v' s# D4 L0 B) _+ }
onmouseout=hidetip();
* M2 j& i- \) Z: q6 V2 [}
) ~: t$ K; x/ F; i9 Y* P9 e4 g0 Q) E</SCRIPT>* j4 P* A, M6 B4 l3 }0 H0 q
# P5 j9 \( D: `% |
' u( k8 J6 i* {# o( W, g+ d( g* I- t5 a& w6 \4 \
G2 Q, x( f9 I+ s% ^" h: b5 ]
/ V: s- W! I1 s' p9 d' e6 W, N7 k1 S% z: G% y
二：将下面的代码复制到〈BODY〉区! f: B- \& ]% M6 h; R
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 1 \5 z4 ^( p' J5 |: U2 e/ n
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">5 }# a1 g$ h7 E5 R' H3 a
<tbody>
' |! q2 G$ D1 E# J+ L <tr align="center" bgcolor="#ffdfd0">
9 T- S% }. V7 P* `5 X <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() * K4 |1 Z0 r7 L i. m+ j; S" @1 r, v
target=_blank>赏心悦目</a></td>
/ n/ D1 E, D, h& T7 h <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
3 m: @2 v- T1 L* f5 } onMouseOut=hidetip()>网页素材</a></td>
. }* f m& X k) ]3 l/ f2 M <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
! z3 p* U) p A4 {$ X target=_blank>图像处理</a></td>
! u# `; x! {) \4 s. C- G3 \1 u <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() $ L: K3 t1 Q" S7 u, p/ {) T8 ~6 E
target=_blank>网页特效</a></td>
# M4 j' x2 S! L4 w' {& ] </tr>
J7 x6 a7 B/ T0 D </tbody>
# ?0 `2 O8 ^: J* `* \/ V </table> |
|
发表于 2008-1-21 20:52
|