Bonjour à tous,
Ca fait 2 jours que je galère sur un probleme, voici la page épurée :
http://908thx.free.fr/test/test.htm
Le but est de passer la souris sur des images qui s'agrandissent sur le coté.
La ça va à peu prés, sauf que si je clique sur la petite image, la grande reste affichée.
Mais ce qui me gène le plus c'est que depuis que j'ai mis cette fonction en place, je ne peux plus cliquer sur mes boutons de liens avec Firefox, Opéra, etc... Par contre avec IE8 ça fonctionne.
En cherchant je suis arrivé à trouver d ou vient mon problème, ce sont les z-index qui masquent mes boutons et liens.
Le soucis est que si j'enlève mes z-index, l'image qui s agrandit vient sous le texte de ma page...
Y a t il une solution, parce que la, j'ai presque plus de cheveux à arracher
Un grand merci d'avance à vous
voila le code html d'une des 5 miniatures :
et le CSS :
Modifié par Razmote (28 Feb 2013 - 11:50)
Ca fait 2 jours que je galère sur un probleme, voici la page épurée :
http://908thx.free.fr/test/test.htm
Le but est de passer la souris sur des images qui s'agrandissent sur le coté.
La ça va à peu prés, sauf que si je clique sur la petite image, la grande reste affichée.
Mais ce qui me gène le plus c'est que depuis que j'ai mis cette fonction en place, je ne peux plus cliquer sur mes boutons de liens avec Firefox, Opéra, etc... Par contre avec IE8 ça fonctionne.
En cherchant je suis arrivé à trouver d ou vient mon problème, ce sont les z-index qui masquent mes boutons et liens.
Le soucis est que si j'enlève mes z-index, l'image qui s agrandit vient sous le texte de ma page...
Y a t il une solution, parce que la, j'ai presque plus de cheveux à arracher
Un grand merci d'avance à vous
voila le code html d'une des 5 miniatures :
<!-- photos -->
<div class="thumb">
<a href="#">
<img class="petit" src="./images/cassis.jpg" alt="Cassis le port" />
<img class="grand" src="./images/cassis.jpg" alt="Cassis le port"/>
</a>
</div>
et le CSS :
/*----- zoom photo -----*/
.thumb {
position: relative;
top: 314px;
margin-left: 40px;
height: 164px;
z-index: 3;
}
.thumb a {
margin: 0;
color: black;
}
.thumb a .grand {
display: block;
position: absolute;
width: 0px;
}
.thumb a:hover .grand, .thumb a:focus .grand {
position: absolute;
top: -200px;
left: 190px;
width: 459px;
height: 347px;
border-width: 1px;
border-style: solid;
border-color: black;
}
.petit {
width: 166px;
height: 123px;
}
Modifié par Razmote (28 Feb 2013 - 11:50)
