|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
7 _; f0 C0 p I9 v; ]7 B/ ?7 o! Q5 s<SCRIPT language=javascript >
; @& ^$ g" e, s5 d+ j, `2 ^5 j: udocument.write(9 a1 Q& p8 r: n9 ~( r$ {- Z
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
) }4 w0 X5 H8 S0 Y1 v;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
; Q. S$ [6 `4 [
/ e4 e! U A- ]; U+ o& G/ _! ]' M% Z$ Pfunction showtip(text) //显示链接的说明' r! P; @# s9 H
{
7 P! `! h; T" z e$ E* `1 E, [ if (document.all&&document.readyState=="complete") //针对IE
' z( e5 y: T3 d! @ {& z$ ?7 n! b7 h" L' q( R p. I G
, A4 x# y, n0 P9 b document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
" P+ t! m d, G7 D; o document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
^% a9 w- ~) H+ [ document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
# Y! Q. ^/ J8 j# d4 l D8 L document.all.tooltip.style.visibility="visible";& a q" {, W! V% i
}
( P+ i, Z* Z' z0 ], ?* {}
8 d& U! ~, M; j4 H/ x/ v) }% ?1 Q/ k
function hidetip() * l9 y0 M% E' a* m6 l8 ^
{) P% f4 A! b7 n) L+ c! d* V' Z9 p
if (document.all)8 c* m/ N- y+ R) q$ N( ?
document.all.tooltip.style.visibility="hidden";1 `2 R- ]' M- `0 y
}9 ^9 e6 n7 K6 W6 g8 y( p! O9 F
% |: o2 V' O; T4 ^function setcolor(fntcolor,bgcolor)
! S- C x' ]5 z4 t{
" M( _+ c6 E: _( o' M4 j) r document.all.tooltip.style.bgcolor=bgcolor;, G, O9 i; D5 Y& C2 j y
document.all.tooltip.innerHTML.Color = fntcolor;( B$ [# ~* v; J
}
! ~* |7 C9 ^" b! k0 ^) z* a) o# |' l) I. j
function showhint(text)9 Q+ T: m* H$ }0 ^7 A3 C% p
{
& p; Y, Q2 O) H) Q2 Y onmousemove=showtip(text);
4 u: }% A" N1 L8 E/ l9 f! P F onmouseover=showtip(text);! q0 N3 V, U4 ~" Q- C
onmouseout=hidetip();6 @/ g/ n0 t7 a2 d% z, u* l! }8 z
} \6 ?2 m0 B5 q
</SCRIPT>
% O% {3 f2 T, w, W9 F. T# Q* X; m/ K) L- A+ ~
, S6 o7 i& ]4 D+ K# z' Y
* ]( h D9 j4 @% v$ |4 b
, X) l- `0 S1 l% {0 M" \; i& W$ B& N' o3 G
: d3 V% w1 k4 e9 Z5 I5 b/ B
二：将下面的代码复制到〈BODY〉区$ Z4 |6 k! Y' a) O Y n- x
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
: k. j4 H2 O; t K4 V* Y$ }cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">: x& r. Z& w+ u- r/ L2 l; ?
<tbody> 1 O+ e! W8 A# b* V7 v' o6 d6 M+ E6 j
<tr align="center" bgcolor="#ffdfd0"> 6 p+ H( i! k) l5 o1 {& s: ~4 {
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
Y- X. J) |2 H) c7 O' } target=_blank>赏心悦目</a></td>+ C# l% |+ \3 Q& H
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
8 h" ~/ Z/ E; _ onMouseOut=hidetip()>网页素材</a></td>
; o5 ~' J0 b$ [+ J# m- t3 ^ <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() 8 y7 B) s: R1 b7 l7 ^+ p: `
target=_blank>图像处理</a></td># m3 Z4 W, j# o
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
% w3 w5 P0 A U' r6 W9 n target=_blank>网页特效</a></td>$ B( H2 ~8 K3 b+ y
</tr>
" M7 @7 a) h+ E3 ?8 f- C </tbody>
$ m1 s* L/ s8 l$ x </table> |
|
发表于 2008-1-21 20:52
|