求助javascript里onmouse事件的代码

[homer98]

本人完全菜鸟，不懂编程。摸索写了以下一段代码，求大神帮我精简，能无限添加table。顺便详细说明一下要替换的地方。感谢！新手入驻，分不多，请见谅！
代码如下：
<script type="text/javascript">
function mouseOver1()
{
document.getElementById('b1').src ="新建文件夹/QD020深蓝主图2.jpg"
}
function mouseOut1()
{
document.getElementById('b1').src ="新建文件夹/QD020深蓝主图1.jpg"
}
function mouseOver2()
{
document.getElementById('b2').src ="新建文件夹/QD059月蓝主图2.jpg"
}
function mouseOut2()
{
document.getElementById('b2').src ="新建文件夹/QD059月蓝主图1.jpg"
}
function mouseOver3()
{
document.getElementById('b3').src ="新建文件夹/QD073红色主图2.jpg"
}
function mouseOut3()
{
document.getElementById('b3').src ="新建文件夹/QD073红色主图1.jpg"
}
function mouseOver4()
{
document.getElementById('b4').src ="新建文件夹/QD073红色主图2.jpg"
}
function mouseOut4()
{
document.getElementById('b4').src ="新建文件夹/QD073红色主图1.jpg"
}
function mouseOver5()
{
document.getElementById('b5').src ="新建文件夹/QD073红色主图2.jpg"
}
function mouseOut5()
{
document.getElementById('b5').src ="新建文件夹/QD073红色主图1.jpg"
}
function mouseOver6()
{
document.getElementById('b6').src ="新建文件夹/QD073红色主图2.jpg"
}
function mouseOut6()
{
document.getElementById('b6').src ="新建文件夹/QD073红色主图1.jpg"
}
</script>
<table id="__01" width="990" height="330" border="0" cellpadding="0" cellspacing="0">
<tr>
<td >
<a onmouseover="mouseOver1()" onmouseout="mouseOut1()"><img src="新建文件夹/QD020深蓝主图1.jpg" width="330" height="330" alt="" id="b1"></a></td>
<td>
<a onmouseover="mouseOver2()" onmouseout="mouseOut2()"><img src="新建文件夹/QD059月蓝主图1.jpg" width="330" height="330" alt="" id="b2"></a></td>
<td >
<a onmouseover="mouseOver3()" onmouseout="mouseOut3()"><img src="新建文件夹/QD073红色主图1.jpg" width="330" height="330" alt="" id="b3"></a></td>
</tr>
</table>
<table id="__02" width="990" height="330" border="0" cellpadding="0" cellspacing="0">
<tr>
<td >
<a onmouseover="mouseOver4()" onmouseout="mouseOut4()"><img src="新建文件夹/QD020深蓝主图1.jpg" width="330" height="330" alt="" id="b4"></a></td>
<td>
<a onmouseover="mouseOver5()" onmouseout="mouseOut5()"><img src="新建文件夹/QD059月蓝主图1.jpg" width="330" height="330" alt="" id="b5"></a></td>
<td >
<a onmouseover="mouseOver6()" onmouseout="mouseOut6()"><img src="新建文件夹/QD073红色主图1.jpg" width="330" height="330" alt="" id="b6"></a></td>
</tr>
</table>

[a756375788]

不太明白楼主的意思，你的html开始就有这么多个table吗？ 还是只有一个？

[homer98]

额，，我只是想一行三张小图，每张小图，鼠标移到上面会切换成另一张图。 然后以此代码，再增加第二行，第三行。。。。。。。。。。 这样

[浮生若梦]

如果你的图片文件名命名这么有规则的话，就没必要这么写啊，mouseover和mouseout事件处理函数中的先获取图片名字，然后判断修改即可，省好多代码不

[homer98]

我就是不懂，才问下大神们怎么精简，还有图片命名以上只是举例，到时会变成链接的。 我只是想问怎么javascript里的function这些要怎么精简成两个，一个over一个out然后里面的图片可以根据table里的代码进行相对应的变化。

[homer98]

引用 5 楼 ivanlxf 的回复:

[quote=引用 4 楼 homer98 的回复:] 我就是不懂，才问下大神们怎么精简，还有图片命名以上只是举例，到时会变成链接的。 我只是想问怎么javascript里的function这些要怎么精简成两个，一个over一个out然后里面的图片可以根据table里的代码进行相对应的变化。

如果命名很有规则，在over事件里先获取图片的src参数，然后替换，out事件反之，不可以么？[/quote] 不好意思，我是真的完全不懂，只是东西拼西凑套路子这样弄的。所以你说的我不是很懂，以能不能帮我精简一下？谢谢了

[浮生若梦]

引用 4 楼 homer98 的回复:

我就是不懂，才问下大神们怎么精简，还有图片命名以上只是举例，到时会变成链接的。 我只是想问怎么javascript里的function这些要怎么精简成两个，一个over一个out然后里面的图片可以根据table里的代码进行相对应的变化。

如果命名很有规则，在over事件里先获取图片的src参数，然后替换，out事件反之，不可以么？

[浮生若梦]

引用 6 楼 homer98 的回复:

[quote=引用 5 楼 ivanlxf 的回复:] [quote=引用 4 楼 homer98 的回复:] 我就是不懂，才问下大神们怎么精简，还有图片命名以上只是举例，到时会变成链接的。 我只是想问怎么javascript里的function这些要怎么精简成两个，一个over一个out然后里面的图片可以根据table里的代码进行相对应的变化。

如果命名很有规则，在over事件里先获取图片的src参数，然后替换，out事件反之，不可以么？[/quote] 不好意思，我是真的完全不懂，只是东西拼西凑套路子这样弄的。所以你说的我不是很懂，以能不能帮我精简一下？谢谢了[/quote]