18073 sujets

Questions générales et questions de débutants

Changement de visuel au rollover

Bonjour,

je créé un site pour une expo et voici mon pb:

pour simplifier, ma page est composée:
- d'un visuel
- d'un menu juste en dessous (géré en css grâce au tutoriel http://css.alsacreations.com/Construction-de-menus-en-CSS/Faire-un-menu-dynamique-sans-prechargement)
Il est sur 3 colonnes (zone de texte + menu partie gauche + menu partie droite).

Je souhaite qu'au survol d'une rubrique du menu, le visuel au dessus change en fonction de la rubrique.

Je voudrais utiliser au maximum les css.
Pouvez-vous m'aider ?


Voici les bouts de code html :

<!-- -------------------------------------------------------------- -->
<!-- Visuel panoramique -->
<!-- -------------------------------------------------------------- -->
<div id="visuel"> <img src="../../medias/images/culture/expo_mayenne/panoramiques/defaut.jpg" name="visuel" alt="Les rives de la Mayenne : patrimoine d'un territoire / Vue de Grez-Neuville" title="Les rives de la Mayenne : patrimoine d'un territoire / Vue de Grez-Neuville" /> 
</div>
<!-- -------------------------------------------------------------- -->
<!-- Menu principal = menu partie Gauche + btn_planning + menu partie droite-->
<!-- -------------------------------------------------------------- -->
<div id="container"><!-- Conteneur global --> 
  <div id="menu_princ"> 
    <p class="texte">BLA BLA BLA</p>
    <ul class="menu_princ_G">
      <li><a id="menu_princ_G1" alt="Paysages et patrimoine" title="Paysages et patrimoine" accesskey="1" href="#"></a></li>
      <li><a id="menu_princ_G2" alt="Les villages" title="Les villages" accesskey="2" href="#"></a></li>
      <li><a id="menu_princ_G3" alt="Patrimoine religieux" title="Patrimoine religieux" accesskey="3" href="#"></a></li>
      <li><a id="menu_princ_G4" alt="Patrimoine rural" title="Patrimoine rural" accesskey="4" href="#"></a></li>
    </ul>
    <ul class="boutons">
      <li><a id="bouton1" alt="Planning de l'exposition" title="Planning de l'exposition" accesskey="8" href="#">Planning 
        de l'exposition</a></li>
      <li><a id="bouton2" alt="Carte" title="Carte" accesskey="9" href="#">Carte</a></li>
    </ul>
    <ul class="menu_princ_D">
      <li><a id="menu_princ_D1" alt="Manoirs et châteaux" title="Manoirs et châteaux" accesskey="5" href="#"></a></li>
      <li><a id="menu_princ_D2" alt="Patrimoine fluvial" title="Patrimoine fluvial" accesskey="6" href="#"></a></li>
      <li><a id="menu_princ_D3" alt="Formes et matériaux" title="Formes et matériaux" accesskey="7" href="#"></a></li>
    </ul>
  </div>
</div><!-- Fin Conteneur global -->
<div id="spacer"></div>


Et pour le css:


/* ========================= 
 VISUEL PANORAMIQUE
========================= */

#visuel {
	width: 760px;
	height: 242px;
	text-align: left;
}

/* ========================= 
 CONTENEUR GLOBAL DU MENU : PERMET D'ALIGNER LA ZONE DE TEXTE ET LE MENU
 EN FAIT, MISE EN PAGE 3 COLONNES POUR L'ALIGNEMENT
 
 CONTENEUR = ZONE DE TEXTE + MENU PRINCIPAL GAUCHE + BOUTONS PRATIQUES + MENU PRINCIPAL DROIT
========================= */

container {/* contient la zone de texte et le menu (= on l'appellera tableau) */
  width:100% ; /* largeur du tableau */
  height:1% ; /* hauteur minimale du tableau */
  margin:0px ; padding:0px ; /* marges intérieures et extérieures du tableau */ 
  }

/******************
 MENU PRINCIPAL PARTIE GAUCHE 
 ******************/
#menu_princ {
	position: absolute;  /*positionnement pour IE5 et IE5.5 */
	float: left;
	width: 280px;
	height: 140px;
	margin:0px;
	padding:0px;
	background-image: url(../../../images/culture/expo_mayenne/accueil/zone_texte.gif);
	background-repeat:no-repeat;
}

.texte {
	position: absolute;  /*positionnement pour IE5 et IE5.5 */
	height: 100px;
	width: 240px;
	margin:20px;
	font-size:80%;
	text-align:justify;
}
.menu_princ_G {
	position: absolute;  /*positionnement pour IE5 et IE5.5 */
	width: 188px;
	height: 128px;
	margin-left:280px;
	margin-top: 7px;
	padding: 0px;
	text-align: center;
	list-style: none; /* suppression des puces de liste */
	background: transparent url(../../../images/culture/expo_mayenne/menu/accueil/menu_princ_G.gif) no-repeat; /* arrière-plan général du menu */

}

.menu_princ_G ul {
	margin: 0px;
}

.menu_princ_G li {
	float: left;
	width: 188px;
	margin: 0px;
	display:inline;
}

.menu_princ_G li a { /* dimensions et définitions des boutons */
	width: 188px;	
	height: 32px;
	line-height: 32px;  /* hauteur de ligne */
	display: block;  /* mise en block de <a> pour lui donner des dimensions */

}

.menu_princ_G li a:hover {
	background-image: url(../../../images/culture/expo_mayenne/menu/accueil/menu_princ_G_over.gif);}

.menu_princ_G a#menu_princ_G1:hover {
	background-position: 0% -128px; /* décalage de l'arrière-plan pour chaque bouton */
}

.menu_princ_G a#menu_princ_G2:hover {
	background-position: 0% -160px;
}

.menu_princ_G a#menu_princ_G3:hover {
	background-position: 0% -192px;
}

.menu_princ_G a#menu_princ_G4:hover {
	background-position: 0% -224px;
}

/******************
 BTN PLANNING + CARTE 
 ******************/

.boutons {
	position: absolute;  /*positionnement pour IE5 et IE5.5 */
	float: left;
	width: 292px;
	height: 29px;
	margin-left: 468px;
	padding: 0px;
	list-style: none; /* suppression des puces de liste */
	text-align: center;
	background: transparent url(../../../images/culture/expo_mayenne/menu/accueil/btn_planning.gif) no-repeat top left; /* arrière-plan général du menu */
	display: inline;
}

.boutons ul {
	margin: 0px;
}

.boutons li {
	/*display: inline;  correction pour IE5 et IE5.5 */
	float: left;
	width: 292px;
	margin: 0px;
}

.boutons li a { /* dimensions et définitions des boutons */
	width: 146px;
	height: 29px;
	line-height: 40px;  /* hauteur de ligne */
	display: block;  /* mise en block de <a> pour lui donner des dimensions */
}

.boutons li a:hover {
	background: transparent url(../../../images/culture/expo_mayenne/menu/accueil/btn_planning.gif) no-repeat top left;
}

.boutons a#bouton1:hover {
	background-position: 0% -140px; /* décalage de l'arrière-plan pour chaque bouton */
}

.boutons a#bouton2:hover {
	background-position: 0% -180px;
}

/******************
 MENU PRINCIPAL PARTIE DROITE 
 ******************/

.menu_princ_D {
	position: absolute;  /*positionnement pour IE5 et IE5.5 */
	float:left;
	width: 292px;
	height: 106px;
	margin-top: 34px;
	margin-left: 468px;
	padding: 0px;
	text-align: center;
	list-style: none; /* suppression des puces de liste */
	background: transparent url(../../../images/culture/expo_mayenne/menu/accueil/menu_princ_D.gif) no-repeat top left; /* arrière-plan général du menu */
	display: inline;
}

.menu_princ_D ul {
	margin: 0px;
}

.menu_princ_D li {
	/*display: inline;  correction pour IE5 et IE5.5 */
	float: left;
	width: 292px;
	margin: 0px;
}

.menu_princ_D li a { /* dimensions et définitions des boutons */
	height: 29px;
	width: 146px;
	line-height: 40px;  /* hauteur de ligne */
	display: block;  /* mise en block de <a> pour lui donner des dimensions */
}

.menu_princ_D li a:hover {
	background-image: url(../../../images/culture/expo_mayenne/menu/accueil/menu_princ_D_over.gif);
}

.menu_princ_D a#menu_princ_D1:hover {
	background-position: 0% -140px; /* décalage de l'arrière-plan pour chaque bouton */
}

.menu_princ_D a#menu_princ_D2:hover {
	background-position: 0% -180px;
}

.menu_princ_D a#menu_princ_D3:hover {
	background-position: 0% -220px;
}

.spacer { /* force au retour à la ligne après des fenêtres float 
C'est à dire après les 3 colonnes (texte + menuG + menuD)
*/
  clear:both
}


Voici une image de la maquette:

upload/2128-indexdecoup.jpg
J'ai une solution mais elle ne me convient pas vraiment du point de vue "standard et accessibilité" : utiliser la fonction javascript swapimage () de dremweaver.

Si vous avez une solution plus "standard"... je suis preneuse!
C'est possible en pure CSS. Ton code me parait complexe, et je te propose donc un exemple simplificateur. Seuls les règles principales y sont, à toi de regler le détail des positionnements :
<style type="text/css">
#menu li {float:left}
#menu li ul{position:absolute;display:none}
#menu .visuel {position:absolute;display:none}
#menu li:hover ul{display:block}
#menu li:hover + .visuel {display:block}
</style>
<body>
<ul id="menu">
<li class="rubrique">rubrique1<ul><li>item11</li><li>item12</li></ul></li>
<li class="visuel"><img src="image1" /></li>
<li class="rubrique">rubrique2<ul><li>item21</li><li>item22</li></ul></li>
<li class="visuel"><img src="image2" /></li>
</ul>
</body>


Et ce code fonctionnera sous IE également si tu utilises IE7
Merci, cela fonctionne sur firefox.

Mais il n'y a pas moyen qu'il fonctionne sur IE (j'utilise la version 6) ?
Existe-il un hack css ?
Je répète :
Xavier a écrit :
Et ce code fonctionnera sous IE également si tu utilises IE7

IE7 ne désigne pas ici une nouvelle version de Microsoft, mais un projet visant à rendre IE compatible Smiley cligne
Modifié par Xavier (07 Jun 2005 - 14:04)
Sujet clos
Aller à