Question regarding menu option for mouseover

[pradnesh]

Hi

I am a new web designer. I am creating a personal website for the photography I have done. I have a left vertical menu. I would like the menu be such that when I mouseover the menu items (Div), I would get the connecting picture appearing on the right.

Can someone help me with this by giving me an appropriate code for the same or telling me how to do the same. I would really appreciate your help and would be grateful for the same.

[LiteTest]

This could be done quite easily with JQuery (can be found here: http://docs.jquery.com/Downloading_jQuery).

Using jquery, you can do something like this:

Imagine that your left menu is like this:
<ul>
<li><a href="#" title="/Images/menuImage1.png" class="imageSwapper">Menu item #1</a></li>
<li><a href="#" title="/Images/menuImage2.png" class="imageSwapper">Menu item #2</a></li>
<li><a href="#" title="/Images/menuImage3.png" class="imageSwapper">Menu item #3</a></li>
</ul>

now, on your page where you display the image, you have:
<div id="imageContainer">
<img src="/Images/default.png" />
</div>

Then you write this javascript:
$(document).ready(function() {
if ($('.imageSwapper').length > 0) {
bindImageSwapper();
};

function bindImageSwapper()
{
$(".imageSwapper").each(function(i) {
$(this).mouseover(function(e) {
var imgSrc = $(this).attr('title');
$('#imageContainer img).attr({ src: imgSrc });
});
});
}

That way, when you hover over a menu item, it will load the image into the div.

The setback here is that the images aren't preloaded so it might take a moment to load the image.
If you want to preload the images (unless they are massive, but then, maybe not a good idea to use mouseover anyway for them), you can just load them into hidden divs first, and even replace the image holder div with the hidden one.

I'm sure you get the jist of it.

P.s: I wrote this in the forum editor so I might have missed a semi colon or something like that, so just double check it before you run it if it's not working.