|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
; ^$ x4 i: B" D8 C1 G* C<SCRIPT language=javascript >
& C0 Y( ` {, R: Z( ydocument.write(6 S7 @6 L# ?2 y8 @3 Y+ M; E, F
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\+ P( S+ g* f& l, K, D% b3 ?
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");* H4 A6 n2 `, g9 l* F# q
+ Q3 Z9 c0 u& }& X9 w, @# d7 S
function showtip(text) //显示链接的说明/ A2 Q9 W7 n1 j0 V$ E6 X
{
: Q- o' L1 M+ c- [9 K; y if (document.all&&document.readyState=="complete") //针对IE
! Y% `3 C- L4 g {5 z- m+ @3 f, P: Q4 C3 M
; H, B* J5 l) } document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
% U; F; o* |2 T, s document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
5 b! w7 [ \ V7 y. Z: P% x document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
; u7 y4 ^ O2 @- v document.all.tooltip.style.visibility="visible";6 }) C Y# b; g; H$ Y
}' }' a' c7 O3 r. m. i; R: c+ v
}+ D# p$ M8 F; Y) z; G; m! ~
4 f, X2 Y3 k3 v# N1 kfunction hidetip() 0 z; W8 G2 x, z' A! s7 n& H/ A
{# H9 _( K1 k# N% n, E
if (document.all)) G4 G$ Q9 ]. v8 M x7 [$ X
document.all.tooltip.style.visibility="hidden";
5 q P' N' J1 a}
- g% N5 w R( f3 n) D& z+ T& H/ A [# t! I4 K& `$ d
function setcolor(fntcolor,bgcolor)
' P9 o; u0 o$ k5 Z! ~{
+ b6 u$ M! ?& w9 A document.all.tooltip.style.bgcolor=bgcolor;
o6 a7 l$ i; ?4 C9 t: d8 n# d document.all.tooltip.innerHTML.Color = fntcolor;
) f- | W2 i& T' O}
5 P8 N, Y" N. @! V: g
' o2 t& J8 @$ ]6 i" e$ {- Pfunction showhint(text)
k m& ^+ m) k* z% ]4 y# j$ @{
$ w4 [1 W4 J5 ^# X! n3 N1 W6 g onmousemove=showtip(text);
8 m/ R6 _. ?: z$ o( B onmouseover=showtip(text);
' d$ O1 ]- P' J6 d onmouseout=hidetip();
3 z3 p/ j) x% F; r& ?& h3 X}, E2 Y) w/ W) S9 n P6 D$ j
</SCRIPT>7 v$ O3 {- l8 `' V
; A. f/ A+ \5 |- ]4 f7 t" }
# w: }# p+ J, E2 u/ m7 M& Q5 L9 f0 H2 a
- X' `; `; p$ ~1 L) X
( T5 J& n g: U: Q' ^7 E: a! F: U
0 c& t7 r3 S$ e# O, ]. Z" d
二：将下面的代码复制到〈BODY〉区' A2 @: `7 E3 \) W! I% y* o! E, U
<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 , l( P5 n! V% J6 X& J' j8 A
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">! Q' z. ?% f0 ^; `- x
<tbody> . F/ s4 e8 }# e; O( V* o/ N
<tr align="center" bgcolor="#ffdfd0">
' O* C6 V- Y! r% D& R5 W9 T/ N" v' M <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip() ( p; C! H* m% }4 g2 k
target=_blank>赏心悦目</a></td>; P1 [+ R2 j; A1 u2 I
<td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')"
5 a8 b4 C9 M$ _& u% E$ U4 l7 y onMouseOut=hidetip()>网页素材</a></td>
]8 p; r. f5 s4 o& V/ C4 } <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
0 R) k4 ]# ]$ d% n l& J target=_blank>图像处理</a></td>
; ^7 I5 \, b" W <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
5 @; C3 P* I1 @7 ~ target=_blank>网页特效</a></td>
+ [# ?, S# Y3 m3 c' y8 I! j </tr>
5 X/ D, g1 W7 P/ L1 S </tbody> * C' x* O% Z% ?( k2 k- z; L$ |3 `, ^
</table> |
|
发表于 2008-1-21 20:52
|