|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
, N" ]) U) F0 |, m& H<SCRIPT language=javascript >
/ ^5 ~9 I+ F* n pdocument.write(
# X F. H9 o! r; Z0 n2 F! T"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
2 h' N! Y& q' h: ~( j, G1 y1 p1 `;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");8 Y6 }# U6 F, W* {! `: d
: M3 n ? }9 Z0 |: j! ~/ F
function showtip(text) //显示链接的说明$ s. t+ j3 G6 s
{! H' e8 f9 u5 L9 S$ Q5 D& s
if (document.all&&document.readyState=="complete") //针对IE
2 G b9 W' w! S! r# {/ o {
- n: ?* }2 Z) F/ |2 ?
8 n+ j& C2 w6 e3 z. x document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
: {5 [5 Q" ]& N% J8 \) f7 a* V9 V document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
7 O C: a. a" }4 w0 ` document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;/ l1 i8 `; Z6 ?
document.all.tooltip.style.visibility="visible";, J/ l: }4 W% I* b% A, ?, b
}8 U; p. e, ~0 D' E0 T' V; I
}
& A+ o, D. x" b/ ? f+ r, w, l2 H7 _" c0 M1 M4 W+ y
function hidetip() 7 F, `4 @& X3 R1 P6 Q' |
{ ~# |4 y7 x2 `3 @
if (document.all)
6 @8 `- \+ D- s# l. H5 X4 L) C/ k) k document.all.tooltip.style.visibility="hidden"; `- s6 S: H0 H
}+ t, ~$ L- J% Y J: X
8 c3 o" \9 J/ P3 c3 F. v/ n
function setcolor(fntcolor,bgcolor)
- d k6 s6 f0 D( u{$ ?5 o; Y- g8 y0 ?+ u
document.all.tooltip.style.bgcolor=bgcolor;6 a; T/ q# e+ f5 B O
document.all.tooltip.innerHTML.Color = fntcolor;
1 N: @! `" B& X( \* t" o0 z+ |% i}& G# p+ S6 f0 E- M; Z- e. R1 Q
4 D4 g5 e! X; p2 c% L7 tfunction showhint(text). ?+ T5 P0 m$ i/ d4 b" [
{
# z# v7 T' b/ O onmousemove=showtip(text);
! Z/ a9 b9 m+ K0 U9 k onmouseover=showtip(text);& r# r+ _; {& Y) ^; i" p) K* D
onmouseout=hidetip();! x( }* W. O. \) A$ d
}* x+ `2 S* i" G& z p1 I" F7 h
</SCRIPT>' G5 m! i" T8 v& |
9 U, C: u' A4 R. f* j
$ ]7 T' c8 [6 |( l% v' r
, Q; I5 [" h9 ^+ {* G( |: I1 I4 Q# t2 I$ F% v' W. ?
4 u+ v, u# ^) i p2 D* q4 u2 x. `# G1 a. @* D
二：将下面的代码复制到〈BODY〉区; a4 q/ |6 V& [' O& `+ v: i' _$ j- e
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 ! b |) |* y% |* ~. n" A
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
- Q8 v. p/ P% I$ R. c$ I( F <tbody>
5 f7 W2 F, N) _0 R <tr align="center" bgcolor="#ffdfd0"> 3 m( V& X' {4 b) C0 I
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
# I( ^3 @: r5 m target=_blank>赏心悦目</a></td>
- I+ K( w* b8 l! Q; |3 ` <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
. o: r* L+ F; ] onMouseOut=hidetip()>网页素材</a></td>! {* F( U% D4 {* n1 r
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
0 }% M8 r1 a, F' C# ~/ i target=_blank>图像处理</a></td>
1 o, d2 [' h- k <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() . Y/ P7 A# r: T6 `3 E7 Q
target=_blank>网页特效</a></td>& A2 Q* t$ V9 n& T+ _( |9 [1 f+ |3 u
</tr>
; V6 d- M* H+ r- r' t </tbody> * |7 W/ t. U {3 d- f
</table> |
|
发表于 2008-1-21 20:52
|