I have several more of these but this is the gist of it...

Code:
<div class="top_row">
<a class="ML" href="link.html"><SPAN onMouseOver="document.pic1.src='ML_over.gif'" onMouseOut="document.pic1.src='ML.gif'"><img name="pic1"></SPAN> MobsLaw</a>

<a class="DnT" href="portfolio/PBBG's/PBBG_4_DnT_Interface.jpg"><SPAN class="DnT" onMouseOver="document.pic1.src='DnT_over.gif'" onMouseOut="document.pic1.src='DnT.gif'"><img src="bluepic1.gif" height="101" width="104" name="DnT"></SPAN>DnT</a>
What I want to do it reduce the amount of code in the HTML and move it into the style sheet.

Also, right now when I mouseOver the second image it changes the image from the first class (ML) line to the mouseOver image in the second class (DnT).

I pulled the code from some website and I'm not even sure what the purpose of
document.pic1.src
is. Is that how it always needs to be, because I don't have that anywhere in my CSS or anything. It was just there from the site I used it from.