jquery - When hovering over one image, change another 2 images -

i have stupidly shaped nav bar , proving incredibly hard use onmouseover effects.

basically, when hover on button, i'd 2 images either side change image mouse hovering over. possible?

my navbar code:

<div align="left" id="navbar">  <ul class="navbarlist">     <li><a href="news.html"><img src="images/news.png" onmouseover="this.src='images/newshover.png'" onmouseout="this.src='images/news.png'"></a></li>     <li><img src="images/newsspace.png"></li>     <li><a href="print.html"><img src="images/print.png"onmouseover="this.src='images/printhover.png'" onmouseout="this.src='images/print.png'" ></a></li>     <li><img src="images/printspace.png"></li>     <li><a href="design.html"><img src="images/design.png" onmouseover="this.src='images/designhover.png'" onmouseout="this.src='images/design.png'"></a></li>     <li><img src="images/designspace.png"></li>     <li><a href="contact.html"><img src="images/contact.png" onmouseover="this.src='images/contacthover.png'" onmouseout="this.src='images/contact.png'"></a></li>     <li><img src="images/contactspace.png"></li>     <li><a href="http://crookedcartoon.bigcartel.com/"><img src="images/shop.png" onmouseover="this.src='images/shophover.png'" onmouseout="this.src='images/shop.png'"></a></li>     <li><img src="images/navend.png"></li> </ul>     </div> 

essentially (i hope makes logical sense):

when hovering on 'images/news.png' i'd 'images/newsspace.png' change also.

when hovering on 'images/print.png' i'd 'images/printspace.png' change 'images/newspace.png' change different image when hovered on 'images/news.png' previously.

is possible? imagine it'll require complicated span; noshow classes , such, can tell me start?

edit---------

using jonathan's jquery suggestion added class each of images make identifying them easier script, however, issue see fade in/out function image has on page script target it.

$(document).ready(function(){ $("ul.navbarlist li:img.news").hover(   function () {     $(this).fadeout     $("ul.navbarlist li:img.newsspace").fadeout   },   function () {     $(this).fadein     $("ul.navbarlist li:img.1a").fadein   } ); 

this issue is, im fading in img.1a isn't on page (just in images folder) can't give class script target from.

oi39.tinypic.com/2ns9tvl.jpg here image demonstrate i'm hoping achieve!

something started:

$("img").hover(   function () {     $(this).fadeout("slow")     $("ul li:last-child img").fadeout("slow")   },   function () {     $(this).fadein("slow")     $("ul li:last-child img").fadein("slow")   } ); 

fiddle