看这篇之前，首先看这篇最后的结果，你会发现html的代码会有很多重复的，也许以后的菜单随之增多，网页的大小也会随之增大，这也许不是问题，问题是图片更改或是样式有变更，涉及的div都要随之变更。
因此，再次重构它。让它在以后的维护更好管理。下面视频为重构过程：
文件格式：.wmv；大小11,750KB；长度：00:09:15。
下载地址
样式code，添加了一个imgstyle，是为了简化hmtl的img前后空格( )，其没有改变，为了方便你拷贝与粘贴无需要两篇之后切换来回，也照搬过来：
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>
