Cheer 发表于 2007-4-28 11:06:05

页面特效不错的windows导航条

把下列代码加到网页的<body></body>标签之间 从google下载我的照片管理软件
要完成此效果把如下代码加入到<body>区域中

<script>
<!--
about=new makearray(3,'about','a');
about2=new makearray(3,'about','');
roskilde=new makearray(4,'r','a');
start=new makearray(11,'startm','a');
start2=new makearray(11,'startm','');
roskilde2=new makearray(4,'r','');   

    function makearray(length, path, image) {
    for(var i = 1; i<=length; i++) {
    this= new image()
    this.src= path + i + image +'.gif'
         }
    return this
      }
function mm_swapimage() { //v1.0
var i,theobj,j=0,swaparray=new array,oldarray=document.mm_swapimgdata;
for (i=0; i < (mm_swapimage.arguments.length-2); i+=3) {
    theobj = eval(mm_swapimage.arguments[(navigator.appname == 'netscape')?i:i+1])
    if (theobj != null) {
      swaparray = theobj;
      swaparray = (oldarray==null || oldarray!=theobj)?theobj.src:oldarray;
      theobj.src = mm_swapimage.arguments;
} }
document.mm_swapimgdata = swaparray; //used for restore
}
function mm_swapimgrestore() { //v1.0
if (document.mm_swapimgdata != null)
    for (var i=0; i<(document.mm_swapimgdata.length-1); i+=2)
      document.mm_swapimgdata.src = document.mm_swapimgdata;
}
function mm_showhidelayers() { //v1.0
var i, visstr, args;
args = mm_showhidelayers.arguments;
for (i=0; i<(args.length-2); i+=3) { //with arg triples (objns,objie,visstr)
    visstr   = args;
    if (navigator.appname == 'netscape') {
      if (document.layers != null) eval(args+".visibility = '"+visstr+"'");
    } else { //ie
      if (visstr == 'show') visstr = 'visible'; //convert vals
      if (visstr == 'hide') visstr = 'hidden';
      if (document.all != null) eval(args+".style.visibility = '"+visstr+"'");
} }
}
function mm_displaystatusmsg(msgstr) { //v1.0
status=msgstr;
document.mm_returnvalue = true;
}
//-->
</script>
<div id=layer4
style="height: 32px; left: 70px; position: absolute; top: 0px; visibility: visible; width: 700px; z-index: 1"><a
href="#"
onclick="mm_swapimage('document.layers[\'layer4\'].document.knapp','document.knapp','linje3.gif');mm_showhidelayers('document.layers[\'layer1\']','document.all[\'layer1\']','show')"><img
border=0 height=25 name=knapp src="linje.gif"
width=53>http://code.ik8.com/html/linje.gif</a><a
href="#"
onmouseover="mm_showhidelayers('document.layers[\'layer1\']','document.all[\'layer1\']','hide','document.layers[\'layer2\']','document.all[\'layer2\']','hide','document.layers[\'layer5\']','document.all[\'layer5\']','hide');mm_swapimage('document.layers[\'layer4\'].document.knapp','document.knapp','linje.gif')"><img
alt="javascript fairyland" border=0 height=25
src="linje1.gif" width=482>http://code.ik8.com/html/linje1.gif</a></div>
<div id=layer1
style="height: 115px; left: 70px; position: absolute; top: 23px; visibility: hidden; width: 181px; z-index: 1">
<table cellpadding=0 cellspacing=0 height=232 width=130>
<tbody>
<tr>
    <td height=251 valign=top width=25><img
      alt="javascript fairyland" border=0 height=249
      src="startm1.gif" width=22>http://code.ik8.com/html/startm1.gif</td>
    <td height=251 valign=top width=139><imgborder=0
      height=5 src="startm2.gif" width=137>http://code.ik8.com/html/startm2.gif<br><a
      href="#"
      onmouseover="mm_swapimage('document.layers[\'layer1\'].document.a','document.a','startm3a.gif','document.layers[\'layer1\'].document.b','document.b','startm4.gif');mm_showhidelayers('document.layers[\'layer2\']','document.all[\'layer2\']','show','document.layers[\'layer5\']','document.all[\'layer5\']','hide');mm_displaystatusmsg('javascript fairyland');return document.mm_returnvalue"><img
       border=0 height=32 name=a
      src="startm3.gif" width=137>http://code.ik8.com/html/startm3.gif</a><br><a
      href="#"
      onmouseover="mm_swapimage('document.layers[\'layer1\'].document.a','document.a','startm3.gif','document.layers[\'layer1\'].document.b','document.b','startm4a.gif');mm_showhidelayers('document.layers[\'layer2\']','document.all[\'layer2\']','hide','document.layers[\'layer5\']','document.all[\'layer5\']','show');mm_displaystatusmsg('javascript fairyland');return document.mm_returnvalue"><img
       border=0 height=32 name=b
      src="startm4.gif" width=137>http://code.ik8.com/html/startm4.gif</a><br><a
      href="link.htm"
      onmouseout="mm_swapimage('document.layers[\'layer1\'].document.c','document.c','startm5.gif')"
      onmouseover="mm_swapimage('document.layers[\'layer1\'].document.a','document.a','startm3.gif','document.layers[\'layer1\'].document.b','document.b','startm4.gif','document.layers[\'layer1\'].document.c','document.c','startm5a.gif');mm_showhidelayers('document.layers[\'layer2\']','document.all[\'layer2\']','hide','document.layers[\'layer5\']','document.all[\'layer5\']','hide');mm_displaystatusmsg('javascript fairyland');return document.mm_returnvalue"><img
       border=0 height=32 name=c
      src="startm5.gif" width=137>http://code.ik8.com/html/startm5.gif</a><br><a
      href="link.htm"
      onmouseout="mm_swapimage('document.layers[\'layer1\'].document.d','document.d','startm6.gif')"
      onmouseover="mm_swapimage('document.layers[\'layer1\'].document.a','document.a','startm3.gif','document.layers[\'layer1\'].document.b','document.b','startm4.gif','document.layers[\'layer1\'].document.d','document.d','startm6a.gif');mm_showhidelayers('document.layers[\'layer2\']','document.all[\'layer2\']','hide','document.layers[\'layer5\']','document.all[\'layer5\']','hide');mm_displaystatusmsg('javascript fairyland');return document.mm_returnvalue"><img
       border=0 height=32 name=d
      src="startm6.gif" width=137>http://code.ik8.com/html/startm6.gif</a><br><a
      href="link.htm"
      onmouseout=mm_swapimgrestore()
      onmouseover="mm_swapimage('document.layers[\'layer1\'].document.a','document.a','startm3.gif','document.layers[\'layer1\'].document.b','document.b','startm4.gif','document.layers[\'layer1\'].document.e','document.e','startm7a.gif');mm_displaystatusmsg('javascript fairyland');return document.mm_returnvalue"><img
       border=0 height=32 name=e
      src="startm7.gif" width=137>http://code.ik8.com/html/startm7.gif</a><br><a
      href="link.htm"
      onmouseout=mm_swapimgrestore()
      onmouseover="mm_swapimage('document.layers[\'layer1\'].document.a','document.a','startm3.gif','document.layers[\'layer1\'].document.b','document.b','startm4.gif','document.layers[\'layer1\'].document.f','document.f','startm8a.gif');mm_displaystatusmsg('javascript fairyland');return document.mm_returnvalue"><img
       border=0 height=32 name=f
      src="startm8.gif" width=137>http://code.ik8.com/html/startm8.gif</a><br><img
       border=0 height=14
      src="startm9.gif" width=137>http://code.ik8.com/html/startm9.gif<br><a
      href="link.htm" onmouseout=mm_swapimgrestore()
      onmouseover="mm_swapimage('document.layers[\'layer1\'].document.b','document.b','startm4.gif','document.layers[\'layer1\'].document.g','document.g','startm10a.gif');mm_displaystatusmsg('javascript fairyland');return document.mm_returnvalue"><img
       border=0 height=32 name=g
      src="startm10.gif" width=137>http://code.ik8.com/html/startm10.gif</a><br><img
       border=0 height=6
      src="startm11.gif" width=137>http://code.ik8.com/html/startm11.gif</td></tr>
<tr>
    <td colspan=2 valign=top width=29></td></tr></tbody></table></div>
<div id=layer2
style="height: 73px; left: 222px; position: absolute; top: 30px; visibility: hidden; width: 112px; z-index: 2">
<p><imgborder=0 height=6
src="top.gif" width=124>http://code.ik8.com/html/top.gif<a
href="link.htm"
onmouseout=mm_swapimgrestore()
onmouseover="mm_swapimage('document.layers[\'layer2\'].document.aba','document.aba','about1a.gif');mm_displaystatusmsg('javascript fairyland');return document.mm_returnvalue"><img
border=0 height=21 name=aba src="about1.gif"
width=124>http://code.ik8.com/html/about1.gif</a><br><a
href="link.htm"
onmouseout=mm_swapimgrestore()
onmouseover="mm_swapimage('document.layers[\'layer2\'].document.abb','document.abb','about3a.gif');mm_displaystatusmsg('javascript fairyland');return document.mm_returnvalue"><img
border=0 height=21 name=abb src="about3.gif"
width=124>http://code.ik8.com/html/about3.gif</a><br><a
href="link.htm"
onmouseout=mm_swapimgrestore()
onmouseover="mm_swapimage('document.layers[\'layer2\'].document.abc','document.abc','about2a.gif');mm_displaystatusmsg('javascript fairyland');return document.mm_returnvalue"><img
border=0 height=21 name=abc src="about2.gif"
width=124>http://code.ik8.com/html/about2.gif</a><img height=4 src="bunn.gif"
width=124>http://code.ik8.com/html/bunn.gif<br></p></div>
<font size=2>
<div id=layer5
style="height: 102px; left: 225px; position: absolute; top: 71px; visibility: hidden; width: 38px; z-index: 1"><img
height=6 src="top.gif" width=124>http://code.ik8.com/html/top.gif<a
href="link.htm"
onmouseout=mm_swapimgrestore()
onmouseover="mm_swapimage('document.layers[\'layer5\'].document.ra','document.ra','r1a.gif');mm_displaystatusmsg('javascript fairyland');return document.mm_returnvalue"><img
border=0 height=21 name=ra src="r1.gif" width=124>http://code.ik8.com/html/r1.gif</a><a
href="link.htm"
onmouseout=mm_swapimgrestore()
onmouseover="mm_swapimage('document.layers[\'layer5\'].document.rb','document.rb','r2a.gif');mm_displaystatusmsg('javascript fairyland');return document.mm_returnvalue"><img
border=0 height=21 name=rb src="r2.gif" width=124>http://code.ik8.com/html/r2.gif</a><a
href="link.htm"
onmouseout=mm_swapimgrestore()
onmouseover="mm_swapimage('document.layers[\'layer5\'].document.rc','document.rc','r3a.gif');mm_displaystatusmsg('javascript fairyland');return document.mm_returnvalue"><img
border=0 height=21 name=rc src="r3.gif" width=124>http://code.ik8.com/html/r3.gif</a><a
href="link.htm"
onmouseout=mm_swapimgrestore()
onmouseover="mm_swapimage('document.layers[\'layer5\'].document.rd','document.rd','r4a.gif');mm_displaystatusmsg('javascript fairyland');return document.mm_returnvalue"><img
border=0 height=21 name=rd src="r4.gif"
width=124>http://code.ik8.com/html/r4.gif<br></a><a
href="#"><img
align=topborder=0 height=4
src="bunn.gif" width=124>http://code.ik8.com/html/bunn.gif</a> </div>
<div id=layer3
style="height: 115px; left: 0px; position: absolute; top: 20px; visibility: visible; width: 200px">
</div>
<script language=javascript>         
function hihot() {         
window.open('link.htm','','width=680,height=470,scrollbars=yes,resizable=yes')         
}         
</script>
</font>
页: [1]
查看完整版本: 页面特效不错的windows导航条