|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间# |6 Z9 a. {$ ~$ a4 s
<SCRIPT language=javascript >/ }0 i2 @ I1 K) a& p
document.write(
* @1 `* o4 S- Z- i"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
. K- I6 k' ]1 X! a, [) q, q;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
. D6 {( G! d( M
: z1 ]7 _8 g- ^+ ifunction showtip(text) //显示链接的说明
0 |% M1 A/ |8 K# G{! {) ^! Z, {$ E- o3 g1 P
if (document.all&&document.readyState=="complete") //针对IE
# c+ L) j! l6 Q* F) i. y' E8 J {! A* p% w* w5 M8 o
2 U( N7 l6 U, J F4 j document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";9 L" \" S* ~8 K# A- c
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
$ F9 U6 l, f& [2 e; C! X1 p$ y8 N document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
& ^" Q8 \0 E$ A& F6 u8 h3 O% I document.all.tooltip.style.visibility="visible";
; Y" c0 `4 C: x" V+ H4 P% Y }
% h0 U6 s+ ~/ \4 F" g( q9 r}
3 i+ E& u N2 h! _$ D# Z* \/ p: b% n5 C& d. i, b
function hidetip()
. K' ~2 A! Y, j8 p7 K{
" J5 L: F/ @* w6 l' `8 c9 G: }if (document.all)
- g0 n5 e7 B" ?% \$ z document.all.tooltip.style.visibility="hidden";
) [- o4 |$ [0 I" k}# f. J1 P# w9 g6 r" Y
! X4 s% i0 k. b( @2 xfunction setcolor(fntcolor,bgcolor)# v6 w6 p5 j% ?1 _# b
{
; \' E. W2 _# [4 g1 ]- j$ t document.all.tooltip.style.bgcolor=bgcolor;
% ^3 K- @1 \2 \, z" X document.all.tooltip.innerHTML.Color = fntcolor;
* n2 @" m9 ?9 c; d}
# m9 i' P% ?" z0 ] @# B; T; [
function showhint(text)
* I# i6 Y& d+ R: C- d- O) l{% q2 e! z( }: ?0 u; C
onmousemove=showtip(text);* W& w' { O& _6 v, z- r; `
onmouseover=showtip(text);( l0 Q9 x# i+ n9 h, X/ f
onmouseout=hidetip();
% ?6 Q P8 F2 t+ B& C& B0 A}
, A* f3 K4 a- V# k6 V5 |& n$ g9 y</SCRIPT>
2 M" {0 M- m5 B5 ~0 B3 r* s6 \
. f+ t1 Z- Q5 A8 B+ z, j( Z
0 L& X5 D1 R5 i' w! e! ]; B* ^& T" j/ S/ }
" ?6 R) O9 h6 f! y: s: u
+ H* G. D3 u4 k" t7 u' `1 c5 t1 W, {- }. x
二：将下面的代码复制到〈BODY〉区/ a* } X( w; W
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
, w5 u5 \ e+ u w0 e3 r: Ncellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">9 }0 ]# L ^- P& y- n" a
<tbody> ' X2 h5 j) z# v! b. N" d, N
<tr align="center" bgcolor="#ffdfd0"> ; b6 Y B2 _( j: Y# T2 w' R5 b
<td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
6 a, M3 y2 \; R+ r7 Q% l target=_blank>赏心悦目</a></td>, l& t" {, U5 C5 i. j1 ~( a
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" # U- U T( k' K. y2 i
onMouseOut=hidetip()>网页素材</a></td>
2 R# v, V; s2 C! `+ d9 z <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() # s* f2 o( o: z, w# i: X7 o' v$ z3 k
target=_blank>图像处理</a></td>, u G& ?5 o. s% g# ~
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 0 k" \( W: A+ Z
target=_blank>网页特效</a></td>9 z7 B) ~1 y" E" c/ A7 {2 B
</tr>
2 s# c4 [7 p& U </tbody>
+ u5 o" Q9 [ _4 ^# Y </table> |
|
发表于 2008-1-21 20:52
|