HTML : Cliquer au travers d'une image
Fermé
bipbipboom
Messages postés
26
Date d'inscription
mercredi 6 juin 2012
Statut
Membre
Dernière intervention
24 février 2015
-
22 oct. 2014 à 12:04
bipbipboom Messages postés 26 Date d'inscription mercredi 6 juin 2012 Statut Membre Dernière intervention 24 février 2015 - 25 oct. 2014 à 16:25
bipbipboom Messages postés 26 Date d'inscription mercredi 6 juin 2012 Statut Membre Dernière intervention 24 février 2015 - 25 oct. 2014 à 16:25
A voir également:
- Html cliquer sur une image
- Image iso - Guide
- Editeur html - Télécharger - HTML
- Comment agrandir une image - Guide
- Acronis true image - Télécharger - Sauvegarde
- Légender une image - Guide
5 réponses
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
525
22 oct. 2014 à 12:22
22 oct. 2014 à 12:22
Salut,
Si j'ai bien compris :
Bonne journée
Si j'ai bien compris :
<a href="images-zoom.jpg" title="Image zoomé">
<img src="images.jpg" alt="Image non zoomé">
</a>
Bonne journée
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
525
22 oct. 2014 à 14:40
22 oct. 2014 à 14:40
Sur la page produit de ton lien, il faut bien séparer deux traitements différents :
1 - ouvrir une fenêtre modale lorsqu'on clique sur un article
2 - avoir l'effet de zoom sur l'image de la fenêtre modale
Dans les deux cas je te conseil d'utiliser des plugins javascript.
Voici par exemple une fenêtre modal de démo réalisée avec le plugin modal.js de bootstrap : https://getbootstrap.com/javascript/#modals
Tu remarque que le contenu de la fenêtre modale est libre : tu peux y insérer tout le code html/css/javascript que tu souhaites.
Une fois la fenêtre modale créée, il te suffit d'y insérer l'image sur laquelle tu souhaites appliquer l'effet de zoom. Pour ce dernier point tu peux utiliser par exemple le plugin jQuery zoom : http://www.jacklmoore.com/zoom/
1 - ouvrir une fenêtre modale lorsqu'on clique sur un article
2 - avoir l'effet de zoom sur l'image de la fenêtre modale
Dans les deux cas je te conseil d'utiliser des plugins javascript.
Voici par exemple une fenêtre modal de démo réalisée avec le plugin modal.js de bootstrap : https://getbootstrap.com/javascript/#modals
Tu remarque que le contenu de la fenêtre modale est libre : tu peux y insérer tout le code html/css/javascript que tu souhaites.
Une fois la fenêtre modale créée, il te suffit d'y insérer l'image sur laquelle tu souhaites appliquer l'effet de zoom. Pour ce dernier point tu peux utiliser par exemple le plugin jQuery zoom : http://www.jacklmoore.com/zoom/
bipbipboom
Messages postés
26
Date d'inscription
mercredi 6 juin 2012
Statut
Membre
Dernière intervention
24 février 2015
22 oct. 2014 à 15:14
22 oct. 2014 à 15:14
Super merci beaucoup Pitet !
bipbipboom
Messages postés
26
Date d'inscription
mercredi 6 juin 2012
Statut
Membre
Dernière intervention
24 février 2015
22 oct. 2014 à 15:46
22 oct. 2014 à 15:46
Je pose une dernière question par rapport à l'exemple, est-il possible de mettre une image superposée à un des produits sur lequel on clique qui fait apparaître le zoom et de rendre cette nouvelle image cliquable au travers afin de pouvoir utilisé l'élément du dessous (l'image du produit actionnant le zoom) ?
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
525
22 oct. 2014 à 16:07
22 oct. 2014 à 16:07
Désolé ce n'est pas encore une fois pas très claire pour moi.
rendre cette nouvelle image cliquable au travers afin de pouvoir utilisé l'élément du dessous
L'élément du dessous c'est l'image cachée par la nouvelle image superposée ? Utilisé l'élément pour faire quoi, afficher l'effet zoom ?
Il faut bien comprendre que l'image sur la page produit et l'image affichée dans la fenêtre modale (avec l'effet zoom) sont complétement indépendante.
rendre cette nouvelle image cliquable au travers afin de pouvoir utilisé l'élément du dessous
L'élément du dessous c'est l'image cachée par la nouvelle image superposée ? Utilisé l'élément pour faire quoi, afficher l'effet zoom ?
Il faut bien comprendre que l'image sur la page produit et l'image affichée dans la fenêtre modale (avec l'effet zoom) sont complétement indépendante.
bipbipboom
Messages postés
26
Date d'inscription
mercredi 6 juin 2012
Statut
Membre
Dernière intervention
24 février 2015
Modifié par bipbipboom le 22/10/2014 à 16:22
Modifié par bipbipboom le 22/10/2014 à 16:22
Je sais bien, j'aimerais seulement rendre cette interaction toujours possible même avec cette nouvelle image superposée, en faite, rien ne change si ce n'est cette nouvelle image cliquable au travers.
bipbipboom
Messages postés
26
Date d'inscription
mercredi 6 juin 2012
Statut
Membre
Dernière intervention
24 février 2015
22 oct. 2014 à 13:00
22 oct. 2014 à 13:00
Merci ça doit être ça mais étant débutant comment faire l'effet de zoom avec ces 2 images :src='http://static.ccm2.net/www.commentcamarche.net/faq/images/k8jPeHb0eXscdWbBViy47LoghhOZAHg8bO1VOkLaeW46ouFpswCcDg2y8otpwTha-epic-la-bataille-du-royaume-secret-s-.png' alt='' width='500' height='281' border='0' />
bipbipboom
Messages postés
26
Date d'inscription
mercredi 6 juin 2012
Statut
Membre
Dernière intervention
24 février 2015
22 oct. 2014 à 13:05
22 oct. 2014 à 13:05
Désolé je crois que ça n'a pas marché donc recommence...
https://i.imgur.com/qBumRux.jpg
https://i.imgur.com/MrdSAbt.jpg
https://i.imgur.com/qBumRux.jpg
https://i.imgur.com/MrdSAbt.jpg
bipbipboom
Messages postés
26
Date d'inscription
mercredi 6 juin 2012
Statut
Membre
Dernière intervention
24 février 2015
22 oct. 2014 à 14:11
22 oct. 2014 à 14:11
Malheureusement cette méthode ne convient pas, il reste le moyen de cliquer au travers de l'image, est-ce possible en code HTML ?
Merci à vous !
Merci à vous !
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
525
22 oct. 2014 à 14:14
22 oct. 2014 à 14:14
Je ne comprend pas ce que tu veux dire par 'effet de zoom' ? Afficher l'image dans un popup au survol de la première image ?
j'aimerais effectuer un zoom sur une image, chose faite
Peux tu nous montrer ce que tu as déjà fait ? Et/ou préciser plus en détail ce que tu souhaites ?
j'aimerais effectuer un zoom sur une image, chose faite
Peux tu nous montrer ce que tu as déjà fait ? Et/ou préciser plus en détail ce que tu souhaites ?
bipbipboom
Messages postés
26
Date d'inscription
mercredi 6 juin 2012
Statut
Membre
Dernière intervention
24 février 2015
Modifié par bipbipboom le 22/10/2014 à 14:20
Modifié par bipbipboom le 22/10/2014 à 14:20
En clair, je cherche à reproduire cette action/effet (cliquer sur un produit pour l'exemple) https://bipbipboom.wixsite.com/essai!collections/c1faw
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
737
24 oct. 2014 à 02:33
24 oct. 2014 à 02:33
Salut
si un élément html même en étant transparent (qu'il soit généré par javascript jquery etc) se retrouve par dessus un autre élément html, l'élément en dessous ne peux pas être cliqué.
Sinon ca serait un beau bordel
Wix pour faire une boutique en ligne !!! sache que wix est le pire générateur de site qui existe : code bourrin de chez bourrin, référencement nul de chez nul.
Un hebergement pro avec prestashop + nom de domaine ne va pas te couter très cher par an. Le referencement et le code généré seront bien mieux que WIX (beurk)
si un élément html même en étant transparent (qu'il soit généré par javascript jquery etc) se retrouve par dessus un autre élément html, l'élément en dessous ne peux pas être cliqué.
Sinon ca serait un beau bordel
Wix pour faire une boutique en ligne !!! sache que wix est le pire générateur de site qui existe : code bourrin de chez bourrin, référencement nul de chez nul.
Un hebergement pro avec prestashop + nom de domaine ne va pas te couter très cher par an. Le referencement et le code généré seront bien mieux que WIX (beurk)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
bipbipboom
Messages postés
26
Date d'inscription
mercredi 6 juin 2012
Statut
Membre
Dernière intervention
24 février 2015
Modifié par bipbipboom le 25/10/2014 à 16:31
Modifié par bipbipboom le 25/10/2014 à 16:31
Bonjour, finalement je modifie ma question :
Mon problème est simple, je cherche un code HTML qui permet de rendre une image cliquable au travers en y ajoutant le style CSS "pointer-events:none".
Etant un grand débutant, est-il possible de me donner l'exemple avec cette image : http://mathiashannau.wikidot.com/l [...] e/film.jpg ?
Merci à vous !
Mon problème est simple, je cherche un code HTML qui permet de rendre une image cliquable au travers en y ajoutant le style CSS "pointer-events:none".
Etant un grand débutant, est-il possible de me donner l'exemple avec cette image : http://mathiashannau.wikidot.com/l [...] e/film.jpg ?
Merci à vous !
