JavaScriptで画像を切り替える

onMouseOverとonMouseOut

<ul>
<li><a href="#"><img src="img/html.gif" width="306" height="204" alt="web制作科作成課題HTML" onMouseOver="this.src='img/html_o.gif'" onMouseOut="this.src='img/html.gif'"></a></li>
<li><a href="#"><img src="img/null.gif" width="306" height="204" alt="web制作科作成課題"></a></li>
<li><a href="#"><img src="img/null.gif" width="306" height="204" alt="web制作科作成課題"></a></li>
<li><a href="#"><img src="img/design.gif" width="306" height="204" alt="web制作科作成課題design" onMouseOver="this.src='img/design_o.gif'" onMouseOut="this.src='img/design.gif'"></a></li>
<li><a href="#"><img src="img/jq.gif" width="306" height="204" alt="web制作科作成課題jQuery" onMouseOver="this.src='img/jq_o.gif'" onMouseOut="this.src='img/jq.gif'"></a></li>
<li><a href="#"><img src="img/null.gif" width="306" height="204" alt="web制作科作成課題"></a></li>
<li><a href="#"><img src="img/null.gif" width="306" height="204" alt="web制作科作成課題"></a></li>
<li><a href="#"><img src="img/null.gif" width="306" height="204" alt="web制作科作成課題"></a></li>
<li><a href="#"><img src="img/js.gif" width="306" height="204" alt="web制作科作成課題JavaScript" onMouseOver="this.src='img/js_o.gif'" onMouseOut="this.src='img/js.gif'"></a></li>
</ul>