|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之带注释的表格菜单特效
一：将下面的代码放在<HEAD>与</HEAD>之间: G- i$ X$ M$ |0 C' Y: {+ G
<SCRIPT language=javascript >
3 A; q$ A- ~% a/ v- @3 I* _document.write(
/ w) C( v }1 T x"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\+ [' @9 J/ w2 u0 W9 \; r# v. G _" r; s# P
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
% `% r3 D& e! H }) Q* E
' M' f3 v# i$ ~( y6 j1 `. D- p( C: pfunction showtip(text) //显示链接的说明7 y1 Z3 j+ Z, I1 k0 a- |
{
1 h& o# Q* L" r+ n; v4 v& B' D7 [# \ if (document.all&&document.readyState=="complete") //针对IE
, ?: R+ v: K( E; q0 [/ E( _ {* V: J9 Y4 ]; x
8 P( q0 }7 q* ?. x
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>"; F7 Q% F, F/ Z; d
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;) G; O9 M' R3 R" @4 ]
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;" V" F% J: W9 B# `
document.all.tooltip.style.visibility="visible";; r. ~- c. A* a0 R. ^! T1 g/ Z
}
* W- E2 W3 K" Z; |6 S) I& f0 D}
" ^' s9 e# c Z
$ J' Y: u' G; vfunction hidetip() % o1 \ q# t$ q1 u. H
{, Z1 k" t1 O6 x, h
if (document.all)* F h3 N3 ^* y
document.all.tooltip.style.visibility="hidden";. B" l8 u' a7 T9 L8 A6 P8 G
}
; J( W; U3 _# R3 q7 ^% r/ V" R( L) Y ^8 q, J; \3 K
function setcolor(fntcolor,bgcolor)
. B6 D5 |0 a7 u4 E4 g3 ~{
M0 e0 f: v2 b5 ^4 K/ V; D* Q* X6 q1 Q document.all.tooltip.style.bgcolor=bgcolor;
2 ~; r% p& [& g8 F document.all.tooltip.innerHTML.Color = fntcolor;- |* ?( K& t& B2 M# @0 i' m
}
# H5 m9 l+ U0 R1 i" B
: H3 v X2 r9 [2 h/ W; Hfunction showhint(text)
7 k( j [& I5 j, X- g' h# c{- L% X" r) E( r4 K% v8 v
onmousemove=showtip(text);- h, H. B9 T5 W0 C( J
onmouseover=showtip(text);* P) O6 y0 w9 ]: e. m9 c" \
onmouseout=hidetip();
8 B) s, ]6 n! ~}
: ^* ?. E; O# f4 S( N/ c</SCRIPT>6 P; W/ M4 n9 d) O+ b, x2 j
' e* t% E) v7 Q) S$ X. ?
; w, I0 d3 z+ r. K; @
; e. c6 a8 S) e" b- _/ o# e8 d9 I3 U+ ? C1 @' S5 ?' {
2 s4 u4 u4 G& `4 O- _# W7 Y0 d/ }' k, q2 ?4 A2 h; _- T, i) K K
二：将下面的代码复制到〈BODY〉区
8 T7 p8 I; X- E7 Z<table align=center border=1 bordercolordark=#ffffff bordercolorlight=#a8cbf1 % q* V0 x0 E, s3 ?3 G
cellspacing=0 class=t width="300" bordercolor="#6699CC" cellpadding="0">- [ w2 P O1 W& y% l
<tbody>
: \ ?7 u8 X1 t6 M9 k1 I5 B; J' I <tr align="center" bgcolor="#ffdfd0">
$ q) R! O9 z6 _8 ?- W <td height=9 width="25%" class="css3"><a href="../../sbtx.html" onMouseMove="showtip('赏心悦目<br>精美的图像和壁纸能使你得到一些放松！')" onMouseOut=hidetip()
' n" h+ M# A, B% a6 A target=_blank>赏心悦目</a></td>
3 p! V7 D) G& m' \9 V <td height=9 width="25%" class="css3"><a href="../../flashmenu1.htm" onMouseMove="showtip('网页素材<br>大量的网页素材给你的网页制作提供方便！')" ) R5 `0 {' Z& b: J1 i, D+ _# X3 F, _
onMouseOut=hidetip()>网页素材</a></td>( L3 [. t X1 `7 P! {0 e" x
<td height=9 width="25%" class="css3"><a href="../../wyjcs.html" onMouseMove="showtip('图像处理<br>图形软件的使用以及图像的特效制作')" onMouseOut=hidetip()
2 x5 w1 Y$ B8 T E% b0 g6 Y target=_blank>图像处理</a></td>
2 Z4 K- Y3 G$ y4 l/ N2 R7 a% q <td height=9 width="25%" class="css3"><a href="../../soft.htm" onMouseMove="showtip('网页特效<br>网页特效的大宝库，有详细的使用说明')" onMouseOut=hidetip() $ ^( s( Z; D7 k1 ]& X
target=_blank>网页特效</a></td>3 ^& C$ h1 t1 F- {3 |6 V. z' A
</tr>+ N( _4 ]% a* @& F- h" k
</tbody> % f' M# a8 ^ H7 k
</table> |
|
发表于 2008-1-21 20:52
|