|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间
7 n( @0 }8 s' |. O! d% K* ]<SCRIPT language=javascript >
9 x$ c7 q% k+ C* b9 H! O( Hdocument.write(3 M5 Z1 K ^* c; n$ H: M! o2 r% h
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
" D/ u- q0 c6 [* r;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");, e4 ^% c7 a3 K& B/ E) I- C
0 w7 o( V6 a; n: m
function showtip(text) //显示链接的说明7 \& b8 w1 }5 b9 r7 }/ F/ L3 J# y v
{
! X5 X( W; B7 m2 L C K9 W if (document.all&&document.readyState=="complete") //针对IE
; W6 q7 t; f B/ s0 [& x* k0 \! W; k6 S7 n {
! q, e8 `1 S1 ?# {7 t* @1 }" p9 T
4 J: P+ K* G4 {* y, { document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
" }! f! W6 j N3 l+ C2 x document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;8 i& I; Y, ~, ^! B
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;& r) l1 F% H0 }+ Z0 ^
document.all.tooltip.style.visibility="visible";3 d$ ]; J$ H4 M2 e: X
}
% n4 ~' Z# o- {" |}
8 w- ~+ _1 M4 I* @* c* f4 h8 h+ Z9 Y! l" l5 g8 s
function hidetip()
" F' R6 N1 ] R2 p0 g{
% |6 E+ N' E3 Z' W+ ~# S$ oif (document.all)
* }" Y' z6 B# l, H: E document.all.tooltip.style.visibility="hidden";
4 e, l$ F: J! @# ?5 b}7 [& w4 L2 M+ Y) ^& v B! |
! g' e9 Y& v- J$ c" _
function setcolor(fntcolor,bgcolor)
1 X ~1 }* [) `( \{
, ~8 c* ?$ G/ b1 S document.all.tooltip.style.bgcolor=bgcolor;
7 y0 K" ]5 r1 ?" B/ X; q document.all.tooltip.innerHTML.Color = fntcolor;) F0 ~' L0 B0 f. m3 [
}
5 V& Z0 ^6 Y" c! w! c7 [" n( Y/ p5 \5 p- b& T4 S
function showhint(text)
; s# T0 t0 `4 t6 t: X0 ~# ^{) U4 I, i1 {- ?# [ ~4 o2 J3 B
onmousemove=showtip(text);
9 s8 O5 T! C7 h onmouseover=showtip(text);1 C& s& @9 ]" s6 _! V: {+ D7 M
onmouseout=hidetip();) ^. F' ?5 [/ L
}
0 q4 [3 F) t4 g/ w( A$ x" d5 y A</SCRIPT>% d6 G/ u2 y5 {/ r$ i
" W+ i, l6 q8 o( U! j4 _; k% I- ~ c# U" J9 H; \
/ d% }6 D8 k* n% H
& x) R# x/ p" _ T( A7 s' v
' m- Z8 f! f/ s- u8 K4 p- S" ^- ?9 P# T
二：将下面的代码复制到〈BODY〉区
- k# o6 h: w3 o, C" j2 j7 a" a<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1
0 g! c. z6 A, A% tcellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">0 T4 o$ m, e" Q2 ]
<tbody> 5 e9 u/ S4 N9 N" j( f% a4 @
<tr align="center" bgcolor="#ffdfd0">
( f! a, N: j6 k+ C' { <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
; L+ F0 U' _0 r' M6 q* _ target=_blank>赏心悦目</a></td>
* Z+ v2 R; n2 s, F, O <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" 3 f% k9 F) s# J/ ~
onMouseOut=hidetip()>网页素材</a></td>
* @1 K" t5 I9 u2 o1 V8 p <td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
7 b) @+ B, B% A- n; F+ P target=_blank>图像处理</a></td>
& T% o% U" N+ m5 X6 } <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip()
9 c3 {$ E) X: l8 r7 J% K8 ` target=_blank>网页特效</a></td>
: c5 d* D; c* P6 R </tr>' O( P0 ]6 z5 Q* a: j6 |. r
</tbody> + N+ v5 f$ q2 @7 f9 _
</table> |
|
发表于 2008-1-21 20:52
|