Mouseover Pictures With HTML?

I'm working on a website and have come to a stop because of a small problem I am having.

I need to learn how to have a mouseover picture (when you put your mouse icon over a picture it changes) I have been told to use Image ready (witch I have), how do I do this? If I need to use html, explain what html codes to use...
Mouseover Pictures With HTML?
the easiest way would be to do this in your img tag



%26lt;img src=%26quot;the image you want when the page loads%26quot; onMouseOver=%26quot;src='the image you want when moused over'%26quot; onMouseOut=%26quot;src='the image you want after the mouse has left the pic'%26quot;%26gt;%26lt;/img%26gt;



but pay attention to the double and single quotes as they are very important.
Mouseover Pictures With HTML?
Create one function which changes the src of images

%26lt;script language=%26quot;javascript%26quot;%26gt;

var i

function change()

{

var im = new Array();

im[0]=path1;

im[1]=path2;

im[3]=path3;

imgVar = im[i];

document.getElementByID('img').src=img鈥?br>
i=i+1;

if (i==im.length)

i=1;

}

%26lt;/script%26gt;

%26lt;img src=%26quot;the image you want when the page loads%26quot; onMouseOver=%26quot;'Change();%26quot; onMouseOut=%26quot;Change();%26quot;%26gt;%26lt;/img%26gt;



Regards,

Milind Kansagara

Web Developer (Cybercomcreation)

Ahmedabad

http://milindkansagara1984.blogspot.com
%26lt;head%26gt;

%26lt;script type=%26quot;text/javascript%26quot;%26gt;

image1 = new Image();

image1.src = %26quot;over.gif%26quot;;



%26lt;/script%26gt;

%26lt;/head%26gt;



%26lt;body%26gt;





%26lt;a href=%26quot;#%26quot; onmouseover=%26quot;image1.src='over.gif'%26quot; onmouseout=%26quot;image1.src='normal.gif'%26quot;%26gt;%26lt;im鈥?src=%26quot;normal.gif%26quot; alt=%26quot;%26quot; border=%26quot;0%26quot; name=%26quot;image1%26quot;%26gt;%26lt;/a%26gt;

%26lt;/body%26gt;