菜单鼠标移入移出切换图片

经常看到网站上有那种菜单，当鼠标移上去时图片变成红色，移开后又变成原来的白色，这里给出实现的 代码

<ul class="user-list block">

<script type="text/javascript">

button1up = new Image(20, 29);

button1up.src = "../institute/decoratorFont/images/1x_1.png";

button1down = new Image(20, 29);

button1down.src = "../institute/decoratorFont/images/1x.png";

button2up = new Image(20, 29);

button2up.src = "../institute/decoratorFont/images/2x_1.png";

button2down = new Image(20, 29);

button2down.src = "../institute/decoratorFont/images/2x.png";

button3up = new Image(20, 29);

button3up.src = "../institute/decoratorFont/images/1x_1.png";

button3down = new Image(20, 29);

button3down.src = "../institute/decoratorFont/images/1x.png";

button4up = new Image(20, 29);

button4up.src = "../institute/decoratorFont/images/2x_1.png";

button4down = new Image(20, 29);

button4down.src = "../institute/decoratorFont/images/2x.png";

button5up = new Image(20, 29);

button5up.src = "../institute/decoratorFont/images/1x_1.png";

button5down = new Image(20, 29);

button5down.src = "../institute/decoratorFont/images/1x.png";

button6up = new Image(20, 29);

button6up.src = "../institute/decoratorFont/images/2x_1.png";

button6down = new Image(20, 29);

button6down.src = "../institute/decoratorFont/images/2x.png";

button7up = new Image(20, 29);

button7up.src = "../institute/decoratorFont/images/1x_1.png";

button7down = new Image(20, 29);

button7down.src = "../institute/decoratorFont/images/1x.png";

button8up = new Image(20, 29);

button8up.src = "../institute/decoratorFont/images/2x_1.png";

button8down = new Image(20, 29);

button8down.src = "../institute/decoratorFont/images/2x.png";

button9up = new Image(20, 29);

button9up.src = "../institute/decoratorFont/images/1x_1.png";

button9down = new Image(20, 29);

button9down.src = "../institute/decoratorFont/images/1x.png";

button10up = new Image(20, 29);

button10up.src = "../institute/decoratorFont/images/2x_1.png";

button10down = new Image(20, 29);

button10down.src = "../institute/decoratorFont/images/2x.png";

</script>

<li><a

href="../journal/aimsAndScope?journalId=<s:property value='journalInfo.journalId'/>"

οnmοuseοver="button1.src=button1up.src"

οnmοuseοut="button1.src=button1down.src"> <img name="button1"

src="../institute/decoratorFont/images/1x.png"

οnclick="javascript:window.open(this.src);" width="30px"

height="29px"> <span class="contact-name"><strong  style="color:#000;">Aims

and Scope</strong> </span> <span class="status_away"></span>

</a></li>

<li class="active"><a

href="../journal/abstractAndIndexing?journalId=<s:property value='journalInfo.journalId'/>"

οnmοuseοver="button2.src=button2up.src"

οnmοuseοut="button2.src=button2down.src"> <img name="button2"

src="../institute/decoratorFont/images/2x.png"

οnclick="javascript:window.open(this.src);" width="30px"

height="29px"> <span class="contact-name"> <strong style="color:#000;">Abstracting

and Indexing</strong> </span> <span class="status_off"></span>

</a></li>

<li><a

href="../journal/openaccess?journalId=<s:property value='journalInfo.journalId'/>"

οnmοuseοver="button3.src=button3up.src"

οnmοuseοut="button3.src=button3down.src"> <img name="button3"

src="../institute/decoratorFont/images/1x.png"

οnclick="javascript:window.open(this.src);" width="30px"

height="29px"><span class="contact-name"> <strong  style="color:#000;">Open

Access</strong> </span> <span class="status_available"></span> </a></li>

<li><a

href="../journal/articlesInPress?journalId=<s:property value='journalInfo.journalId'/>"

οnmοuseοver="button4.src=button4up.src"

οnmοuseοut="button4.src=button4down.src"> <img name="button4"

src="../institute/decoratorFont/images/2x.png"

οnclick="javascript:window.open(this.src);" width="30px"

height="29px"><span class="contact-name"> <strong  style="color:#000;">Articles

in Press</strong> </span> <span class="status_available"></span> </a></li>

<li><a

href="../journal/authorGuildelines?journalId=<s:property value='journalInfo.journalId'/>"

οnmοuseοver="button5.src=button5up.src"

οnmοuseοut="button5.src=button5down.src"> <img name="button5"

src="../institute/decoratorFont/images/1x.png"

οnclick="javascript:window.open(this.src);" width="30px"

height="29px"><span class="contact-name"> <strong  style="color:#000;">Author

Guidelines</strong> </span> <span class="status_available"></span> </a></li>

<li><a

href="../journal/articleProcessCharges?journalId=<s:property value='journalInfo.journalId'/>"

οnmοuseοver="button6.src=button6up.src"

οnmοuseοut="button6.src=button6down.src"> <img name="button6"

src="../institute/decoratorFont/images/2x.png"

οnclick="javascript:window.open(this.src);" width="30px"

height="29px"><span class="contact-name"> <strong  style="color:#000;">Article

Processing Charges</strong> </span> <span class="status_available"></span> </a></li>

<li><a

href="../journal/publicEthics?journalId=<s:property value='journalInfo.journalId'/>"

οnmοuseοver="button7.src=button7up.src"

οnmοuseοut="button7.src=button7down.src"> <img name="button7"

src="../institute/decoratorFont/images/1x.png"

οnclick="javascript:window.open(this.src);" width="30px"

height="29px"><span class="contact-name"> <strong  style="color:#000;">Publication

Ethics</strong> </span> <span class="status_available"></span> </a></li>

</ul>