Mouse over help - javascript image/mouse over

Ok, what I want to do is two fold. I want to have a dynamic mouse over set of navigational links on the left column of a web page with the links vertical. When you mouse over each link, the image will highlight the links/category name, and at the same time to the right of the nav column load in a different image for each mouse overed link in the right column.

Does this make sense? Something like this: http://www.nutrenaworld.com/

Except I DO NOT want to use flash... I would prefer to do this with something like java script. That said, the images in the right column will remain static.

Thank you.

 

Use the following JavaScript code. Edit the preload function to add your own images. Also edit the swap function to add the id of the image to be swapped.

function MM_swapImgRestore() {
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() {
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { 
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { 
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function preload(){             
	MM_preloadImages('images/image1.jpg', 'images/image2.jpg', 'images/image3.jpg', 'images/image4.jpg');
 }
 function swap(img, src){
	MM_swapImage('id_of_image_to_be_swapped', '', 'images/' + src, 1);
 }

Code (markup):

In the mouseover event of the links call the function swap and restore as given below.

<a href="link1.php" onMouseOut="MM_swapImgRestore()" onMouseOver="swap('image1.jpg')">Link 1</a>
<a href="link2.php" onMouseOut="MM_swapImgRestore()" onMouseOver="swap('image2.jpg')">Link 2</a>
<a href="link3.php" onMouseOut="MM_swapImgRestore()" onMouseOver="swap('image3.jpg')">Link 3</a>
<a href="link4.php" onMouseOut="MM_swapImgRestore()" onMouseOver="swap('image4.jpg')">Link 4</a>

Code (markup):

 

Thanx a million for the help. I found a few mistakes in the code, but it gave me a starting point. I really appreciate it.

Thanx again!

 

I didn't run the script. Took the code I used in a site I developed last year and made some changes to suit your need.
Anyway happy to know that it helped