看这篇之前，首先看这篇最后的结果，你会发现html的代码会有很多重复的，也许以后的菜单随之增多，网页的大小也会随之增大，这也许不是问题，问题是图片更改或是样式有变更，涉及的div都要随之变更。
因此，Insus.NET再次重构它。让它在以后的维护更好管理。下面视频为重构过程：
文件格式：.wmv；大小11,750KB；长度：00:09:15。
下载地址：
样式code，添加了一个imgstyle，是为了简化hmtl的img前后空格( )，其没有改变，为了方便你拷贝与粘贴无需要两篇之后切换来回，Insus.NET也照搬过来：
View Code .div_menu { margin-top: 2px; margin-bottom: 2px; padding: 5px; padding-left: 20px; background-color: #dcdcdc; height: 16px; } .imgStyle { margin-left: 5px; margin-right: 5px; }
Javascript code中，删除函数(function) InsusOver(id)和InsusOut(id)，并改写如下javascript 代码，这样可以简化html的内容，当菜单增多或减少时，只是修改javascript内的array元素，作相应的增多或减少。另外图片的src与align在每个菜单中也相同，因此也抽取放在javascript中实现。
View Code window.onload = function () { var divs = new Array("div1", "div2", "div3", "div4", "div5"); for ( var o in divs) { var divTag = document.getElementById(divs[o]); divTag.className = "div_menu"; divTag.onmousemove = function () { this.style.backgroundColor = "#faf0e6"; }; divTag.onmouseout = function () { this.style.backgroundColor = "#dcdcdc"; }; }; var pics = new Array("img1", "img2", "img3", "img4", "img5"); for ( var o in pics) { var pic = document.getElementById(pics[o]); pic.src = '<%= ResolveUrl("~/link.gif")%>'; pic.align = "absmiddle"; pic.className = "imgStyle"; }; };
接下来，是简化后的html代码：
View Code < div style ="background-color: #FFFFFF; height: 3px;" > </ div > < div id ="div1" > < img id ="img1" /> < a href ='<%= ResolveUrl("~/Default1.aspx") % >'>Hyperlink1 </ a > </ div > < div id ="div2" > < img id ="img2" /> < a href ='<%= ResolveUrl("~/Default2.aspx") % >'>Hyperlink2 </ a > </ div > < div id ="div3" > < img id ="img3" />< a href ='<%= ResolveUrl("~/Default3.aspx") % >'>Hyperlink3 </ a > </ div > < div id ="div4" > < img id ="img4" /> < a href ='<%= ResolveUrl("~/Default4.aspx") % >'>Hyperlink4 </ a > </ div > < div id ="div5" > < img id ="img5" />< a href ='<%= ResolveUrl("~/Default5.aspx") % >'>Hyperlink5 </ a > </ div >