28172 sujets

CSS et mise en forme, CSS3

Problème avec les écrans tactiles

Bonjour,

edit: l'expression touchpad n'était pas bonne, il faut lire plutôt touch device, ou écran tactile en français. Enfin tout le monde aura compris, concernant le iPad Smiley confused

j'ai mis sur mon site le code suivant, dans le but d'ouvrir une image au survol d'un texte. Ensuite, si on clique sur l'image, on accède à la proposition de téléchargement du document. L'image étant chargée avec la page, j'ai aussi ajouté srcset, afin de coller aux différentes résolutions d'appareils. Tout fonctionne bien sous Firefox et avec une souris. Sur un iPad, l'image s'ouvre correctement quand on touche le texte, mais impossible de la refermer. Elle reste scotchée là où elle s'est ouverte. La seule solution est de recharger la page, ce qui n'est pas très élégant.

Y-a-t-il un code à ajouter ? J'ai pensé à mettre une temporisation, de façon à fermer l'image au bout de x secondes, mais il doit y avoir mieux.

Il y a aussi une autre différence entre un desktop et une tablette. Sur un desktop, je propose le téléchargement OU l'ouverture du document. Sur le iPad, il n'y a pas le choix, le document est chargé d'office.

Le HTML :
<a class="viewpic" href="Documents/Bidon-1.pdf" download="Documents/Bidon-1.pdf">dunun en m&eacute;tal <span> <picture>
   <source media="(min-width: 16em)"
      srcset="Images/Bidon-320-C.jpg 320w,

      Images/Bidon-780-C.jpg 780w,           
      Images/Bidon-1024-C.jpg 1024w"/> 
	<img src="Images/Bidon-1024-C.jpg" class="arrondie1" alt="Bidon" />
</span></a> </picture>.


Le css :
a.viewpic {
  position:relative;
  border-bottom:1px dashed #808080;
  text-decoration: none;
}
a:hover.viewpic {
  text-decoration: none;
  background: none;
}
a.viewpic span {display: none;}

a:hover.viewpic span {
  display: inline;
  position: absolute; 
  top: -20px;
  left: 10px;
  z-index: 20;
  width:160%;
  padding:2px 4px;
}


Merci pour les conseils.
Modifié par Bongota (21 Nov 2017 - 15:17)
Bonsoir,

Le problème est que la commande se fait relativement à un simple lien, l'image s'ouvrant sur un :hover. C'est une trouvaille qui a ses limites, on ne peut rien contrôler de cette manière. L'idéal serait de passer par javascript afin d'avoir un réel contrôle de ce que l'on souhaite obtenir.

Exemple en ligne (les images munies d'une icône et réagissant au survol sont zoomables) : Scriptura, Images

Le code concerné : Zoom sur les images (Github)
Merci pour la réponse.
J'ai trouvé une solution, un peu tordue, mais elle fonctionne sur un iPad. Je fais disparaître l'image au bout d'un temps déterminé, suffisamment long pour qu'elle soit vue.
Gros problème, le lien disparaît avec l'image !!! Et il ne réapparaît qu'au rechargement de la page.
Je continue à chercher.

a:hover.viewpic{

opacity:0.0;

-moz-transition: opacity 8s;

-webkit-transition: opacity 8s;

-o-transition: opacity 8s;}
Sujet clos
Aller à