28172 sujets

CSS et mise en forme, CSS3

Bon, rien d'original à mon problème.

J'ai un soucis de z-index, une image reste au dessus d'une autre alors qu'elle devrait pas...

<div class="cell100x75" style="background:url(image.jpg) no-repeat;">
<img src="/images/masque-hue.png" style="position:absolute; z-index:2;">	
<a href="image2.jpg" class="jqzoom-hue"><img src="/images/zoom100x75.png" style="position:absolute; z-index:3;"></a>						
</div>


JQZoom est un widget jquery, il charge une popup window en z-index 1000...

.zoomWindow{
	position:absolute;
	left:110%;
	top:40px;
	border:1px solid #dcdcdc;
	background:#FFF;
	height:auto;
  z-index:1000;
	border-radius:150px;
	-moz-border-radius:150px;
	-webkit-border-radius:150px;
}


Or mon image placée en z-index:3 (la petite loupe) reste dessus cette nouvelle fenêtre.

Sûrement une histoire de relatif/absolu, aussi je suis tout ouïe... Smiley smile
Merci.

upload/42856-Capturedec.png
Modifié par muqaddar (18 Jan 2012 - 12:36)
Salut,

Pour autant que je m'en rappelle, JQZoom permet de faire un zoom sur une image et de se balader dans l'image.
Si je pars de ce principe, on voit la loupe seulement quand on passe (en mode zoom) sur la partie de l'image où la loupe est présente normalement ou alors on la voit tout le temps ?
Ma loupe sert à informer le visiteur qu'on peut passer le curseur sur la petite image... pour afficher la grande, bref, qu'il y a une action qu'on peut faire. Smiley smile
Merci de ton intérêt pour mon soucis.

Alors:
L'image originale (la vignette) fait 100x75.
C'est bien le JS exemple que tu cites qui est utilisé.

Seulement, je ne me balade pas comme dans l'exemple parce que par défaut mon image affichée dans la fenêtre loadée fait la même taille que son div. Du coup, ça affiche directement la grande image dans mon div de 300x300 (div auquel j'ai ajouté un arrondi cf première image envoyée).

Mais bon, ça ne change rien au problème. Ce que je ne comprends pas, c'est que j'ai un masque au dessus de ma thumb: lui ne pose pas soucis avec son z)index à 2. Par contre la loupe avec son z-index à 3 pose problème...
Tu fais ça en local ou bien tu as hébergé le tout, histoire que je puisse jeter un oeil ?

La loupe est dans quel contenant ?
Modifié par Fahrenheit (18 Jan 2012 - 12:13)
La loupe s'appelle : zoom100x75.png
Regarde le premier code en haut et tu verras l'arborescence de son contenant.

Pour l'instant je suis en local, mais je vais pas tarder à tout balancer sur un serveur.
Si tu veux je te fais signe à ce moment-là. Smiley cligne