Afficher une div sur une image

Bonjour,

je cherche comme le nom l'indique, à afficher une div sur une image, je voudrais en fait sur mon site, simuler l'ouverture d'une porte a 2 battants, quand on passe la souris sur l'un des deux battants, ce même battant s'ouvre (effet OnMouseOver,OnMouseOut), j'ai donc besoin de deux div, pour chacun des deux battants, or je n'arrive même pas à superposer une seule div sur l'image, avez vous une solution ? je vous affiche ci dessous mon code

<div id="animation_porte">
	<img src="../images/autres/porte_1.png" name="porte">
	<div id="porte_tour" OnMouseOver="porte.src='../images/autres/porte_2.png'" OnMouseOut="porte.src='../images/autres/porte_1.png'">
			<a href="./touristes.html"> </a>
	</div>
	<div id="porte_prof" OnMouseOver="porte.src='../images/autres/porte_3.png'" OnMouseOut="porte.src='../images/autres/porte_1.png'">
			<a href="./professeurs.html"> </a>
	</div>
</div>

et le CSS

#animation_porte {
	margin-top:60px;
	text-align:center;
	width:460px;
	height:604px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
}

#animation_porte img {
	position:relative;
}

#porte_tour {
width:460px;
height:604px;
position:absolute;

}

#porte_peda {

}

à noter que mon code css n'est pas vraiment correct étant donné que j'ai essayé plusieurs choses, mais cela ne s'est pas avéré concluant... Merci d'avance pour vos réponses.