How to change image with onmouseover in different place that reverts back to default image on the site?

Question

I\'m no expert in this so excuse me if this is very basic but I couldn\'t find answers.

So I want to have navigation section with categories on the left side of the

Answer 1

You need to store the old image src in a temporary variable, or element somewhere, for example, using a global:

var originalImage;
function mouseOverImage2()
{
    originalImage = document.getElementById("catPic").src; 
    ... 

And then restore it on the mouse out:

document.getElementById("catPic").src=originalImage;

Edit

You can cache other properties (height, width) in much the same way. One thing to note is not to mix old-school html height and width attributes with style height and width - this will lead to confusion.

I've update the Fiddle here