首先说明代码也是拿来的，从Dreameawer的源代码提取的，不过经过自己的修改，减少了代码的书写量，更容易懂得
下面是HTML 页面文件代码:
注意注释说明~！
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>导航栏</title>
- <!-- 导入js文件-->
- <script type="text/javascript" language="javascript" src="backpoint.js"></script>
- </head>
- <body>
- <!--
- href 做你想做的事
- onclick 鼠标点击
- onMouseOver 当然是鼠标移入事件
- onMouseOut 鼠标移出事件
- target 在哪个窗口显示,你自己设置吧,如果是ajax应该不用这个东西
- P.S
- 1.图片超链接，注意在鼠标事件中img 的 id
- 2.img 标签一定要在a标签内
- 3.img 标签初始显示的图片(src="")是 正常显示的图片
- -->
- <a href="javascript:;" onClick="clicks('M1')" onMouseOver="over('M1')" onMouseOut="out()">
- <img src="ball_1.png" border="0" id="M1" /></a>
- <a href="javascript:;" onClick="clicks('M2')" onMouseOver="over('M2')" onMouseOut="out()">
- <img src="ball_1.png" border="0" id="M2" /></a>
- <a href="javascript:;" onClick="clicks('M3')" onMouseOver="over('M3')" onMouseOut="out()">
- <img src="ball_1.png" border="0" id="M3"/></a>
- </body>
- </html>
封装好的 js文件 backpoint.js
- //图像显示数组
- //第1张为 鼠标移入显示的图像
- //第2张为 鼠标点击显示的图像
- var s=['ball_2.png','ball_3.png']; //图象背景
- //鼠标移入， 下面的id 为 IMG标签的id
- function over(id){
- MM_nbGroup('over',id,s[0],'',1)
- }
- //鼠标点击， 下面的id 为 IMG标签的id
- function clicks(id){
- MM_nbGroup('down','group1',id,s[1],1)
- }
- //鼠标移出
- function out(){
- MM_nbGroup('out');
- }
- //以下的我不知道，当然也不再进行分析了，毕竟我们是站在巨人的肩膀上
- //拿来主义 豆是好啊~~~~ 0^_^0
- function MM_preloadImages() { //v3.0
- var d=document;
- if(d.images){
- if(!d.MM_p)
- d.MM_p=new Array();
- var i,j=d.MM_p.length,a=MM_preloadImages.arguments;
- for(i=0; i<a.length; i++)
- if(a[i].indexOf("#")!=0){
- d.MM_p[j]=new Image;
- d.MM_p[j++].src=a[i];
- }
- }
- }
- function MM_findObj(n, d) { //v4.01
- var p,i,x;
- if(!d)
- d=document;
- if((p=n.indexOf("?"))>0&&parent.frames.length) {
- d=parent.frames[n.substring(p+1)].document;
- n=n.substring(0,p);
- }
- if(!(x=d[n])&&d.all)
- x=d.all[n];
- for (i=0;!x&&i<d.forms.length;i++)
- x=d.forms[i][n];
- for(i=0;!x&&d.layers&&i<d.layers.length;i++)
- x=MM_findObj(n,d.layers[i].document);
- if(!x && d.getElementById)
- x=d.getElementById(n);
- return x;
- }
- function MM_nbGroup(event, grpName) { //v6.0
- var i,img,nbArr,args=MM_nbGroup.arguments;
- if (event == "init" && args.length > 2) {
- if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
- img.MM_init = true;
- img.MM_up = args[3];
- img.MM_dn = img.src;
- if ((nbArr = document[grpName]) == null)
- nbArr = document[grpName] = new Array();
- nbArr[nbArr.length] = img;
- for (i=4; i < args.length-1; i+=2)
- if ((img = MM_findObj(args[i])) != null) {
- if (!img.MM_up) img.MM_up = img.src;
- img.src = img.MM_dn = args[i+1];
- nbArr[nbArr.length] = img;
- }
- }
- } else if (event == "over") {
- document.MM_nbOver = nbArr = new Array();
- for (i=1; i < args.length-1; i+=3)
- if ((img = MM_findObj(args[i])) != null) {
- if (!img.MM_up)
- img.MM_up = img.src;
- img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
- nbArr[nbArr.length] = img;
- }
- } else if (event == "out" ) {
- for (i=0; i < document.MM_nbOver.length; i++) {
- img = document.MM_nbOver[i];
- img.src = (img.MM_dn) ? img.MM_dn : img.MM_up;
- }
- } else if (event == "down") {
- nbArr = document[grpName];
- if (nbArr)
- for (i=0; i < nbArr.length; i++) {
- img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0;
- }
- document[grpName] = nbArr = new Array();
- for (i=2; i < args.length-1; i+=2)
- if ((img = MM_findObj(args[i])) != null) {
- if (!img.MM_up)
- img.MM_up = img.src;
- img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
- nbArr[nbArr.length] = img;
- }
- }
- }
可以用到的友友就拿去用吧，稍微改动下就可以了
可以学习下，还有什么不懂得可以联系我~！ 大家一起交流交流~~