|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间0 L1 `' f/ ?2 l9 P2 ~. j, S
<SCRIPT language=javascript >
9 y4 o4 M: B+ T4 f! d+ B; T( f/ F0 z* Edocument.write(
7 y1 k# s! }. k) d1 T"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\% u' Q+ w8 i7 ]$ D1 K+ V6 x, n
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
% c- X0 r! S8 r6 a6 E% `, ?4 E r2 w- w
function showtip(text) //显示链接的说明: H& Q$ k Q; o8 R" b
{& ]* n: V! P8 J, Y, _9 R& Y+ N
if (document.all&&document.readyState=="complete") //针对IE5 [% F+ L" _/ ?6 j0 s+ X! ~
{4 T: B# D5 P) z9 Q( Z
0 d$ g& v0 K7 J; }- q document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
8 M+ i- r( n" K. f9 s# i document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
6 A; j D% M) d! y' Z document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
+ j; O7 k* ?& X. H, b) q+ U document.all.tooltip.style.visibility="visible";6 O& c k0 v+ B5 N
}/ v/ S: p- R/ ?) X( `- G
}( t; L9 r8 `; N4 d! r3 `
& W- O/ v! J4 C0 g: N b( X: `% J: J4 v
function hidetip()
L& V( _' E2 O l% X2 O# V9 o! R# z{+ q3 U& H! b6 E( m' w
if (document.all)
9 J2 N; M \- k5 Y document.all.tooltip.style.visibility="hidden";
% H) Q- S9 o; b}! E" X: g6 W9 q
* j( K% Q; ?, t3 a1 ^. C
function setcolor(fntcolor,bgcolor)
6 q5 |9 _. l3 q{
3 P3 s' W* T ?7 Y document.all.tooltip.style.bgcolor=bgcolor;5 D9 F) b9 q9 O) Z$ W4 y
document.all.tooltip.innerHTML.Color = fntcolor;
: v! b; ~( T* _9 G, q}$ N$ A# [. x' x1 F3 ^9 }3 S/ z! [
4 ?: ?: @8 a. y- _& ?3 S
function showhint(text)$ |( v _+ [9 r3 x
{
+ m- K/ I9 L: `6 l+ C onmousemove=showtip(text);6 G8 ~ L, D5 }) v+ Z
onmouseover=showtip(text); D( ~5 C ?" X1 E
onmouseout=hidetip();
' P( L1 l U7 a/ U9 L, |$ x1 e6 O}
* [5 V J; P# j* Q: y. X7 i, p</SCRIPT>
- M2 \1 w9 Z8 D; x$ h
+ [( y- _! G8 B# |. m* D& t: d: ~. _0 ?$ J; X" U% y" H& e/ o* S1 c6 K
( l: Y0 e& K7 G2 B+ j! a
7 C* y {9 \! E$ ?9 n, b Y: e" x) _
Z2 {* g& U+ `7 o) D
二：将下面的代码复制到〈BODY〉区 J7 Q( Q% R8 Y4 g* }
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 + @0 I* l( F' ~. A% ?$ ]) {
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
8 z' ^/ q2 h, H m8 w <tbody> 7 u3 N5 M7 ]1 l a% v6 h6 G9 P" F
<tr align="center" bgcolor="#ffdfd0">
5 d4 M* Z5 ^# F" V: a& X3 n <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
& c# m5 U" W% C1 A" R, o) A& l target=_blank>赏心悦目</a></td>
; t* @* z( \1 ]4 v" o <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
) O, f2 j# `8 \) w# J% l onMouseOut=hidetip()>网页素材</a></td>+ Y, h; N8 E; n: Y
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip() 4 l$ O* L2 M* W1 B6 C
target=_blank>图像处理</a></td>0 N6 d6 z+ F+ k9 }# I$ ?4 w
<td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
( `( a- `% J# ~+ ~ target=_blank>网页特效</a></td>* G, x1 f; C- i$ Z- m
</tr>
9 v: |% ?7 f' P' T2 }# ^1 A </tbody> 7 X8 k/ L7 i1 q! I- |
</table> |
|
发表于 2008-1-21 20:52
|