Bonjour
Je viens de faire une petite page de test, avec comme objectif de mettre au point un mécanisme de montrer/cacher une image à partir de sa miniature:
C'est à dire que "poster" s'affiche quand on passe la souris sur "thumbnail"; reste affiché tant qu'on laisse la souris sur "poster" et disparait quand la souris sort de "poster".
Jusque là, tout va bien, mais je voudrais aussi que ça marche sur une tablette, et là, pas de :hoover qui tienne!
J'ai donc ajouté des actions sur clic, avec le design suivant (testable uniquement sur tablette):
1) si on clique sur thumbnail, je change la classe de thumbnail en "thumbnail active"
2) si on clique sur poster, je remets la classe de thumbnail à "thumbnail"
3) dans le CSS
La première action fonctionne, la seconde pas du tout, le poster reste visible, j'en déduis que
ne fonctionne pas.
Comme je n'ai pas trouvé de moyen de debugger sur la tablette, difficile de mettre ça au point.
Quelqu'un aurait il une idée?
Le fichier de test est à l'adresse http://alma-musica.net/tests/poster.html
Merci de votre aide
Modifié par PapyJP (03 Jun 2015 - 10:09)
Je viens de faire une petite page de test, avec comme objectif de mettre au point un mécanisme de montrer/cacher une image à partir de sa miniature:
<div class="container">
Ceci est le texte associé.
<img class="thumbnail" src="..." alt="" />
<img class="poster" src="..." alt="" />
</div>
.container {background:yellow;color:blue;position:relative;width:50%;margin:30px auto;}
.thumbnail{position:absolute;top:0;left:-30px;}
.poster{position:absolute;top:-20px;left:-35px;display:none;max-width:200px;}
/* poster est normalement invisible */
.thumbnail:hover ~ .poster, .poster:hover {display:block;}
/* poster visible si on est au dessus de thumbnail ou au dessus de poster */
C'est à dire que "poster" s'affiche quand on passe la souris sur "thumbnail"; reste affiché tant qu'on laisse la souris sur "poster" et disparait quand la souris sort de "poster".
Jusque là, tout va bien, mais je voudrais aussi que ça marche sur une tablette, et là, pas de :hoover qui tienne!
J'ai donc ajouté des actions sur clic, avec le design suivant (testable uniquement sur tablette):
1) si on clique sur thumbnail, je change la classe de thumbnail en "thumbnail active"
this.className="thumbnail active"
2) si on clique sur poster, je remets la classe de thumbnail à "thumbnail"
this.previousSibling.className="thumbnail"
3) dans le CSS
.thumbnail:hover ~ .poster, .thumbnail.active ~ .poster, .poster:hover {display:block;}
La première action fonctionne, la seconde pas du tout, le poster reste visible, j'en déduis que
this.previousSibling.className="thumbnail"
ne fonctionne pas.
Comme je n'ai pas trouvé de moyen de debugger sur la tablette, difficile de mettre ça au point.
Quelqu'un aurait il une idée?
Le fichier de test est à l'adresse http://alma-musica.net/tests/poster.html
Merci de votre aide
Modifié par PapyJP (03 Jun 2015 - 10:09)