28172 sujets

CSS et mise en forme, CSS3

Image change à chaque survol d'un lien différent

Bonjour,

Le titre de mon topic n'est pas très clair, j'avoue avoir du mal à formuler mon problème (et donc à trouver une solution sur le Net). Voici une illustration qui, j'espère, simplifie les choses :

http://img200.imageshack.us/img200/3440/liensrollover.jpg

J'aimerai que, lorsque le texte A est survolé, l'image correspondante apparaisse à gauche ; lorsque le texte B est survolé, l'image correspondante apparaisse, etc. Et que lorsque mon curseur n'est sur aucun des liens, une image par défaut s'affiche (qui n'est pas une des images correspondantes aux liens de droite). Un exemple similaire est disponible sur ce site. Sauf qu'ici, le tout est fait avec du Javascript. Je voudrai savoir s'il est possible de faire ce que je recherche uniquement avec du css et du php (pour respecter les normes W3C).

J'espère que vous pourrez m'aider, ça fait quelques temps que cette idée me trotte dans la tête sans trouver la solution. Smiley bawling
Hello EmmaR et bienvenue,

sur le principe tu pourrais faire quelque chose comme ça :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css" media="screen">
#conteneur {
    width: 500px;
	height: 600px;
    margin: auto;
	padding: 10px;
	border: 1px solid black;
	position: relative;
	background: url(imageParDefault.jpg) 5px 5px no-repeat;
}

#menu {
	margin: 0;
	padding: 0;
	list-style: none;
	float:right;
	text-align: center;
}

#menu a img {
	border: none;
	position:absolute;
	left: 5px;
	top: -5000px; /* permet de cacher l'image */
	width: 1px;
	height: 1px;
}

#menu a:hover img, 
#menu a:focus img, 
#menu a:active img {
	top: 5px;
	width: 350px;
	height: 580px;
}
</style>
</head>
<body>
<div id="conteneur">
	<ul id="menu">
		<li><a href="#">Texte A <img src="imageA.jpg" width="350" height="580" alt="Description image A" /></a></li>
		<li><a href="#">Texte B <img src="imageB.jpg" width="350" height="580" alt="Description image B" /></a></li>
		<li><a href="#">Texte C <img src="imageC.jpg" width="350" height="580" alt="Description image C" /></a></li>
		<li><a href="#">Texte D <img src="imageD.jpg" width="350" height="580" alt="Description image D" /></a></li>
	</ul>
</div>
</body>
</html>
En complément, lire Remplacement d'images : halte au display none !

EmmaR a écrit :
Sauf qu'ici, le tout est fait avec du Javascript. Je voudrai savoir s'il est possible de faire ce que je recherche uniquement avec du css et du php (pour respecter les normes W3C).
Il n'y a aucune raison que le JavaScript invalide ton code ou qu'il le rende inaccessible (cela peu même être un plus à ce niveau) pour peu qu'il soit bien intégré.
Modifié par Heyoan (27 Jul 2009 - 07:25)
Merci beaucoup pour cette réponse rapide ! Smiley smile Je vais essayer avec ces codes et je posterai prochainement le résultat, en espérant que tout fonctionne. Merci encore !

Pour le Javascript, je croyais qu'il n'était pas autorisé par les normes W3C. Smiley eek Merci d'avoir corrigé mon erreur.
Modifié par EmmaR (27 Jul 2009 - 22:05)
Sauf erreur de ma part, les normes du W3C n'interdisent pas l'utilisation du langage Javascript.

Néanmoins, ce dernier peut causer des problèmes du côté des clients suivant l'utilisation que tu en fait, et, il peut aussi engendrer des problème de référencement.
Merci pour ce complément d'informations. Smiley smile

J'ai donc essayé le code, et vous pouvez voir ce que ça donne ici, inclus dans mon site. Donc, sur le principe du survol des liens et de l'affichage d'images qui change, tout fonctionne. Mais la mise en page me pose problème. Smiley confus Le texte est aligné à droite, mais à l'opposé de l'image (au lieu de "contre elle"). Voici les codes (avec les maigres modifications que j'y ai apporté) :

#conteneur { 
    width: 550px; 
    height: 300px; 
    margin: auto; 
    padding: 10px; 
    border: 1px solid black; 
    position: relative; 
    background: url(http://danjradcliffe.online.fr/images/music/neutre.jpg) 5px 5px no-repeat; 
} 
 
#menumusique { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    float:right; 
    text-align: left;
} 
 
#menumusique a img { 
    border: none; 
    position:absolute; 
    left: 1px; 
    top: -5000px; /* permet de cacher l'image */ 
    width: 1px; 
    height: 1px; 
} 
 
#menumusique a:hover img,  
#menumusique a:focus img,  
#menumusique a:active img { 
    top: 1px; 
    width: 90px; 
    height: 128px;
}


<div id="conteneur"> 
    <ul id="menumusique"> 
        <li><a href="#">Texte A <img src="http://danjradcliffe.online.fr/images/music/imageA.jpg" width="90" height="128" alt="Description image A" /></a></li> 
        <li><a href="#">Texte B <img src="http://danjradcliffe.online.fr/images/music/imageB.jpg" width="90" height="128" alt="Description image B" /></a></li> 
        <li><a href="#">Texte C <img src="http://danjradcliffe.online.fr/images/music/imageC.jpg" width="90" height="128" alt="Description image C" /></a></li> 
        <li><a href="#">Texte D <img src="http://danjradcliffe.online.fr/images/music/imageD.jpg" width="90" height="128" alt="Description image D" /></a></li> 
    </ul>	
</div>


Un autre détail : je compte répéter ce cadre avec des liens et des images plusieurs fois dans ma page, mais les séparer par des titres (illustration plus claire ici), mais tous ne seront pas de la même hauteur. Quelle dimension attribuer dans le css pour la hauteur du #conteneur, qui doit donc varier selon le nombre de liens qui apparaissent dans la liste ? Smiley confused
Sujet clos
Aller à