Hover sur un menu

Bonjour,

Je me permets de venir sur le forum afin de demander un peu d'aide.
J'ai créé 3 menus sur la gauche et lorsqu'on survole un de ceux-ci j'aimerai que l'image change à droite.



Je ne m'y connais pas beaucoup en codage et encore moins en javascript et je me demandais s'il serait possible de ne faire ca qu'en CSS.

Mon code html

<div id="menu">
  <div id="menugauche">
  	    <div id="valeurs">
        <h1> </h1>
			<h2>Valeurs</h2>
			<p>& visions stratégiques</p>
			<a href="#">&nbsp;</a>		</div>
        <div id="partenaires">
        <h1> </h1>
			<h2>Partenaires</h2>
			<p>Partenaires </p>
			<a href="#">&nbsp;</a>
		</div>
		<div id="plan">
        <h1> </h1>
			<h2>Plan dynamique</h2>
			<p>Découvrez le</p>
			<a href="#">&nbsp;</a>
		</div>
  </div>

Et le CSS

#menu{width:778px; height:280px; position:relative; margin:0 auto; padding:0;}

#menugauche{ width:247px; height:214px; position:absolute; top:38px; left:9px;}
#menu #valeurs{ float:left; width:237px; height:62px; position:relative; margin:0 auto; background:url(images/icon-valeurs-nor.gif) 0 0 no-repeat;}
#menu #valeurs h1{width:526px; height:236px; position:absolute; top:-10px; left:240px; background:url(images/header-img-valeurs.gif) 0 0 no-repeat #FCFAE6; color:#fff; font-size:36px; line-height:18px; text-transform:uppercase; text-indent:-2000px;}
#menu #valeurs h2{width:130px; height:10px; background:#fff; display:block; position:absolute; left:0px; top:0px; margin:14px 0 5px 81px; font:14px Georgia, "Times New Roman", Times, serif; color:#CC0000; z-index:1; text-transform:uppercase;}
#menu #valeurs p{
	width:125px;
	height:10px;
	display:block;
	position:absolute;
	font:12px/14px "Trebuchet MS",Arial, Helvetica, sans-serif;
	color:#2E5000;
	background:#fff;
	margin:34px 0 0 81px;
	z-index:1;
}
#menu #valeurs a{text-decoration:none; display:block; width:237px; height:62px;}
#menu #valeurs a:hover{text-decoration:none; background:url(images/icon-valeurs-hover.gif) no-repeat 0 0;}

D'avance un tout grand merci

j'ai été un peu vite en besogne... je reteste ma solution
Modifié par _laurent (12 Dec 2011 - 15:56)

Bon,

J'ai été un peu trop enthousiaste..

La solution que je proposais :

#valeurs:hover #plan{background-image:url('mondossier/monimage.png');}

ne fonctionne que si "plan" est DANS "valeurs" :

<div id="valeurs"><div id="plan"></div></div>

et ça, c'est pas très pratique pour toi..

Donc, pour moi, le plus simple serait de faire ça en javascript.

Faire en jQuery serait plus simple du style :

$("#valeur").hover(function(){
$("#plan").addClass("img-valeur");
});

Le JS rajoutera la class dans le block.

Dans le CSS :

.img-valeur {
background-image:url('mondossier/monimage.png');
}

Merci pour vos réponses..

J'ai essayé tant bien que mal avec la piste que m'a donné Boris56 mais pas moyen d'arriver à ce que je veux