ciao ragazzi! ho un problema che riguarda sia html che css quindi non sapevo dove andare a scrivere.. chiedo scusa se ho sbagliato..

Veniamo a noi!
Ho fatto una pagina semplice semplice costituita da uno sfondo e delle immagini a forma di pulsante che mandano a link.
Questi pulsanti li ho poi resi con 2 immagini diverse al passaggio del mouse con l'hover.

Il problema nasce quando passa il mouse sopra le immagini: funziona l'hover, ma le altre immagini si spostano. A cosa può essere dovuto??

questo è il codice:

codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Area Riservata</title>
<script src="fixedbackground.js" type="text/javascript"></script>
<link rel="stylesheet" href="stile_nrg.css" type="text/css" />

</head>

<body onload="fixedBackground('elementi_area_2/area2.jpg')">
	<div class="contenitore">
            [img]elementi_area_2/Pulsantone.png[/img]
            [img]elementi_area_2/Frecce.png[/img]
             <div class="cambioimmagine">
                <a href="http://organizzazione.nrggroup.it">
                    [img]elementi_area_2/p_portale.png[/img]
                    [img]elementi_area_2/port_hover.png[/img] 
                 </a>
             </div> 
             <div class="cambioimmagine">
                <a href="http://organizzazione.nrggroup.it:8080/Infinitynrg/cms/vademecum.html">
                    [img]elementi_area_2/p-vademecum.png[/img] 
                    [img]elementi_area_2/Vad_hover.png[/img]
                </a>
             </div>
             <div class="cambioimmagine">
                <a href="http://organizzazione.nrggroup.it:8080/Infinitynrg/cms/utility.html">
                    [img]elementi_area_2/Utility.png[/img] 
                    [img]elementi_area_2/Ut_hover.png[/img] 
                </a>
             </div>
             <div class="cambioimmagine">
                <a href="#">
                    [img]elementi_area_2/B2B.png[/img] 
                    [img]elementi_area_2/B2B_hover.png[/img] 
                </a>
             </div>
             <div class="cambioimmagine">
                <a href="#">
                    [img]elementi_area_2/Infinity.png[/img] 
                    [img]elementi_area_2/Infinity_hover.png[/img]
                </a>
             </div>
	         [img]elementi_area_2/logo_nrg.png[/img]
	</div> 
</body>
</html>
Il div classe CONTENITORE è un div che contiene tutte le immagini e viene centrato automaticamente.

Qui invece c'è il CSS:

codice:
@charset "UTF-8";
/* CSS Document */

.contenitore {
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding: 0px;
	width: 547px;
	height: 667px;
}

.immagine1 {
	display: block;
}

.immagine2 {
	display: none;
}

.cambioimmagine:hover .immagine1 {
	display: none;
}

.cambioimmagine:hover .immagine2 {
	display: block;
}
Non so se è troppo confusionario.. ma se qualcuno ci capisse qualcosa e potrebbe darmi una mano gliene sarei molto grato.. grazie..

Toti.