Image swap when hover over link
I'm trying to do a basic image swap when a link is mouseovered. The idea is that you hover over a group of links that is associated with that image, and the image lights up. I have different sets of links and images all over the page.
markup looks something like this:
<div class="container-left">
<img src="/images/logo1-off.jpg" alt="" width="75" height="75" />
<div class="text">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor...</p>
<a href="javascript:void(0);">Link 1</a><br />
<a href="javascript:void(0);">Link 2</a><br />
<a href="javascript:void(0);">Link 3</a>
</div>
</div>
<div class="container-right">
<img src="/images/logo2-off.jpg" alt="" width="75" height="75" />
<div class="text">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor...</p>
<a href="javascript:void(0);">Link 1</a><br />
<a href="javascript:void(0);">Link 2</a><br />
<a href="javascript:void(0);">Link 3</a>
</div>
</div>
There will be about 10 rows of this. So, how can I swap the image to 'logox-on.jpg' when the links associated with that image are hovered over?
I'm trying to do one tidy function that will handle it all, without having to have unique id's.
Anything that will point me in the right direction will be appreciated. Thanks.