JQuery :: How To Match Two Index Numbers Of Different Elements

Currently I'm trying to create a menu with a mouseover effect on a link, which causes an image to display. All images are positioned on the same place, so the optical effect is that one image changes all the time. To achieve this I created an unordered list with the links / items in it, and I created a div with the (corresponding) images. On a mouseover event over a link, the index number of the current li element is stored in a variable, and I want to use that variable to select the corresponding image.

(So <li> index:2 corresponds to <img> index:2)
So in 'human language':
on mouseover of li {
var indexNumber = li.indexnumber
change class of img[indexNumber]
}

But I can't get it to work. I managed to store the 'current' indexnumber successfully in a variable:
var indexNumber = $("li").index(this);

But I can't use the variable to select the corresponding <img> I tried:
$('.slidemenuImgbox img:eq(indexNumber)').addClass('slidemenu_show');
But nothing happens

However when I do:
$('.slidemenuImgbox img:eq(1)').addClass('slidemenu_show');
The image with index:1 is changed.
How to use a variable in :eq()
To see a 'live' example (With no images changing): [URL]