|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间/ T$ d* h5 p6 o% o) p! y
<SCRIPT language=javascript >
" q7 ^, T! ^- E- @; ]document.write(! s7 Y- Q" E' P; t9 `4 U0 l2 S, J& U
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
" R- e+ {, Q) Y6 F; ?( s;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
$ l, A$ c, ?- U {5 v
/ G# p' i& B; m, @, bfunction showtip(text) //显示链接的说明- t$ ?9 F. w9 e& h* x4 N& F
{
; I" e4 s8 C" ]; h& s7 s if (document.all&&document.readyState=="complete") //针对IE
6 {- q4 U! ~: A+ n0 e {
6 j/ c; \: a) y: V: p ! x9 W* |; ?% }) X
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";. t* p7 t0 z1 ~( G
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
; X- A0 r% U; M' _4 o6 _8 Q document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;- ~7 d& N( I" F: s2 D/ X, b
document.all.tooltip.style.visibility="visible";
- K2 m) e; n8 ?3 d; t }
3 d' Y K! c7 F9 T; |}- \! T# E4 E' ~6 ~
3 j) }/ E, _' Y) ]2 _, Ufunction hidetip()
5 E+ m1 u/ V; j% M2 J. i2 P( L{6 e" Y% c4 F/ N& z8 j/ x
if (document.all)
9 H8 {/ b& w$ ^3 G* p# L, N document.all.tooltip.style.visibility="hidden";# @. Z0 S4 v# _4 d/ Z6 L
}
6 J# d H+ u" R u3 ?
+ `# {% k' j6 e! vfunction setcolor(fntcolor,bgcolor) s# H; {7 X3 D- d3 y. Y& |% J
{
& P! Z+ f; k/ s+ H$ @6 x% e document.all.tooltip.style.bgcolor=bgcolor;$ n! N/ Q4 y, G+ ~
document.all.tooltip.innerHTML.Color = fntcolor;# ]# |8 s9 m+ \
}
8 C$ {5 W6 X* c( z% Y' v* {! D
; }. y3 Z( `8 F- Tfunction showhint(text)
) }7 G2 k0 F, U7 {5 s2 x{
3 g* b$ v! U# m. ~, S4 L onmousemove=showtip(text);
- \2 ^, c5 H# A ]1 R onmouseover=showtip(text);2 N1 v( G; a3 q0 E5 `$ k
onmouseout=hidetip();& L; w. M' d4 d
}9 _2 Z: m/ {4 z ?$ Z& y
</SCRIPT>* `, N7 j0 J7 }. V. t6 d) l* \
% q+ E' T) y5 {+ r* R
* C A# O* s( N7 U: j
4 g% o0 E+ v. S6 S! @; B
5 Q& z3 g3 T+ |6 L8 w1 n
- f: y S5 ?, X* C% i5 V3 u/ u- r
, r- ?! |: t4 ] Z- s6 [: b7 l# p( Y: c二：将下面的代码复制到〈BODY〉区! t7 n: D% w* G+ E% w9 K
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 * i% l9 p0 ]" O
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
! J; J$ z% e5 \% T <tbody> & v* w- ^( ?# A ~3 m1 |
<tr align="center" bgcolor="#ffdfd0"> ( i! Z( |( }' O3 N4 \
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() + U# c6 V; H, F+ w" T" l
target=_blank>赏心悦目</a></td>
p1 q) ]- q$ x$ Y: P <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" : b+ d. W8 o0 f) z- u6 e. ~. h
onMouseOut=hidetip()>网页素材</a></td>7 d: d! Q: y4 k: c9 U
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
6 P \8 p8 o. p2 U target=_blank>图像处理</a></td>( G2 }% o1 n" e, o; V. {( A1 z
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
. w, A- E) [0 \9 `1 w target=_blank>网页特效</a></td>
* U. J1 y+ S+ K) | @ </tr>
9 r1 Q8 J; `9 a9 N; t </tbody>
! O" h9 u$ D. E) p" `- F </table> |
|
发表于 2008-1-21 20:52
|