why do my images change position when rolled over?

Question

HI, I have a row of buttons (6 six) al same size. When each one is rolled over..

<img src="home.jpg" onmouseover="HomeAct(this)" onmouseout="Home(this)"/>

function HomeAct(obj){
    obj.src='webseparada/home.png';
}

function Home(obj){
    obj.src='webseparada/home.jpg';
}

home.jpg is a regular rectangle

home.png is a folder where label es is the button (home.jpg)

Thank you very much!

Answer 1

Are you sure the image sizes are the same? It would make sense if they weren't. You can also explicitly specify the image sizes through css to force them to be consistent.

Answer 2

Here is why button1 sends all reimaing button the next line. When i sept in button 2 it doesn't move button1, but it goes down a line and sends al remaining another line, can anyone tell me if this can be corrected by css?

Thank you very much