Discussion :

[Pierre1111]

J'avais l'intention de créer une mise en page contenant une image s'agrandissant au passage de la souris.

Pour cela, j'ai créé deux blocs associés à deux id : "conteneurvignette" pour la petite image et "conteneurimage" pour la grande, conteneur image étant inclus dans conteneur vignette.

Voici la partie significative du code XHTML :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="conteneurvignette"><img src=vignette.jpg>
<div id="conteneurimage"><img src=image.jpg>
</div>
</div>

et le CSS :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#conteneurvignette {
position: absolute;
top: 210px;
left: 530px;
width: 120px;
height: 170px;
}
 
#conteneurimage {
position: absolute;
top: 0px;
left: 0px;
width: 120px;
height: 170px;
display: none;
}
 
#conteneurvignette:hover > #conteneurimage {
display: block;
}

Sous IE7 tout se passe bien, par contre aucune réaction sous Firefox. Quelqu'un a-t-il une idée ? Merci d'avance.

[pop_up]

J'ai testé sous firefox 3 et j'ai bien l'image au survol.

Tu es sur quelle version de firefox ?
Sinon, pour ton code, tu peux mettre des guillemets autour du nom de ton image et fermer la balise image qui est une balise auto fermante

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<img src="image.jpg" />

Ce code ne fonctionne pas sous IE6 ce qui est normal car la propriété :hover ne fonctionne que sur les balises <a> dans le cas de ce navigateur.

PS: pense à la balise code pour mettre ton code htlm et css (bouton #)

[Pierre1111]

Merci pop-up pour ta réponse, et désolé pour la balise code, j'y penserai la prochaine fois.

J'ai Firefox 2. Mais ce qui m'étonne, c'est que je me suis inspiré d'un menu déroulant pour écrire ce code, et que ce menu déroulant fonctionne parfaitement bien avec ma version de Firefox.

Pour IE6, je ne vois pas trop comment résoudre le problème, les balise <a> n'acceptant pas d'enfant si je ne me trompe pas.

Je pense que je vais être obligé de revoir toute la construction...

[pop_up]

Étant donné que tu veux appliquer un comportement au survol de la souris, tu peux peut être essayer avec du javascript et la propriété onmouseover.

On peut imaginer que le onmouseover appliquerai un display: block à ta div qui contient la grande image et le onmouseout un display:none en pensant bien à initialiser ta page avec un display: none pour ta grande image

Bien sur, si le javascript est désactivé, cela ne fonctionnera pas.

N'ayant pas firefox2, je ne peux pas t'aider sur le debogage désolé

[Pierre1111]

Je crois en effet que je vais passer par javascript.

Merci et bonne journée.

[Macmillenium]

Bonjour,

Tu peux le faire sans javascript ni la propriété display :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
#conteneurvignette {
position: absolute;
top: 210px;
left: 530px;
width: 120px;
height: 170px;
}
 
#conteneurimage {
position: absolute;
top: 200px;
left: 0px;
overflow:hidden;
width:0;
height:0;
}
 
#conteneurvignette:hover { border:0; }
 
#conteneurvignette:hover #conteneurimage {
width: 120px;
height: 170px;
}

Code xhtml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<a id="conteneurvignette" href="#">
 
	<img src="vignette.jpg" alt="" />
 
	<span id="conteneurimage">
		<img src="image.jpg" alt="" />
	</span>
 
</a>