|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
( X8 B5 D% Z8 }' z( J/ j; p<SCRIPT language=javascript >- S9 u) W5 q% j2 E; m2 i, b
document.write() e: r W0 P; _
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\2 X) }$ T$ s9 }2 U* H
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
' x4 R1 c2 C6 {$ S8 B& T @4 a# a/ @2 D7 G* o
function showtip(text) //显示链接的说明
* p2 @+ H* F- q! q5 j; w3 t N{. h/ @& `9 W: X( H
if (document.all&&document.readyState=="complete") //针对IE
! G# a0 s9 v7 k: A9 x {
4 ?4 s. ] Z6 u5 G 8 U9 Q5 J( @& c
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
+ y" ?; M! T X0 j5 `) Q6 C document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;7 v6 |: |2 {9 }% G. }
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
% R- R' ^1 R2 H7 D4 B- K document.all.tooltip.style.visibility="visible";
1 W9 s* D6 \* K; t T/ k/ [) k/ \ } @' O$ T+ R+ L+ ?* T2 v& d& y
}- z0 i* Q5 y2 Q* Y4 R) @% n# l& i H
; V0 i+ \$ F9 @; y0 b5 H
function hidetip() 1 X! e3 j/ s8 L1 O/ N
{
+ b6 l2 g$ f. ^if (document.all)
# ^% q4 U4 A& U4 I document.all.tooltip.style.visibility="hidden";2 { Q5 I2 Z5 n$ s9 I1 K
}
2 H5 A7 [6 m$ A1 @8 \1 ^: C* n) o: {! Z1 n! e0 B! ~
function setcolor(fntcolor,bgcolor)
9 U: |4 W" I6 c+ b$ R2 a0 h{
+ j. m; |0 G4 G- c, _6 S6 T' o0 d document.all.tooltip.style.bgcolor=bgcolor;
7 ]& ^5 ]# g9 |2 @$ G+ y# S. i# B document.all.tooltip.innerHTML.Color = fntcolor;
9 S+ g5 X% U7 ~, x$ \0 h5 d1 k}
& a) ?) k! k4 |% ?2 _" q; J" M' m7 n$ X9 n/ f1 {7 L: }% f8 w
function showhint(text)7 i4 W4 \( ]; r. E1 V: j) S
{. @" |7 q* A2 Z% K$ s+ ~
onmousemove=showtip(text);7 v: E: T. e4 p6 m2 `6 n
onmouseover=showtip(text);7 M+ Q8 h' |3 E e* J- I& }
onmouseout=hidetip();- L( k7 h" w* |$ o, n: e1 M" U
}
" M5 T7 l2 u" q" B% ]5 G</SCRIPT>5 \3 r$ F/ c5 L' [9 n" ^2 g
+ |6 F6 z; [$ Q/ P# J! w! y! a- u& [
, I4 v1 _: H3 m
4 n5 |: u+ p& b" ~7 M8 p% i
# S2 }) s3 I4 y4 O9 T e. K
" U- X" }+ c/ F2 `6 \
二：将下面的代码复制到〈BODY〉区
3 A' G( o u; u* ?9 C7 m<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 " k: M- ]- F8 d$ o
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">
& ^' n) J5 h4 S. Z <tbody> 0 A. G5 a: C; C8 Z% s
<tr align="center" bgcolor="#ffdfd0">
* N J* O" ^3 m <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
7 u* u8 T4 M$ g6 ^& n+ E) W* v9 [ target=_blank>赏心悦目</a></td>, x! e- o* e& x2 E
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" 8 Z) E* R% b8 h- q
onMouseOut=hidetip()>网页素材</a></td>
4 u& l# Q) [% T0 r <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
# |5 _' }! v# j5 R target=_blank>图像处理</a></td>
2 H- y. A. J& Y9 ~( X: ]/ v <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() 6 y% x7 w# e, P( q& q
target=_blank>网页特效</a></td>
( d5 y3 D8 k. h0 { </tr>1 H# b* r! j8 @& p2 t$ W2 o# P
</tbody> 8 i7 ~0 s* A, N' l8 a8 n5 A
</table> |
|
发表于 2008-1-21 20:52
|