HTML : Cliquer au travers d'une image
bipbipboom
Messages postés
26
Date d'inscription
Statut
Membre
Dernière intervention
-
bipbipboom Messages postés 26 Date d'inscription Statut Membre Dernière intervention -
bipbipboom Messages postés 26 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Voila mon problème, j'aimerais effectuer un zoom sur une image, chose faite, mais ce zoom n'ouvrirait pas l'image cliquée mais une autre différente.
Donc je cherche simplement un code HTML (si possible ?) qui permettrait de cliquer au travers d'une image afin de pouvoir accéder à mon but ou bien existe-t-il un code permettant d'ouvrir une image en zoom à partir d'une différente ?
J'espère avoir été clair, merci de votre aide !
Voila mon problème, j'aimerais effectuer un zoom sur une image, chose faite, mais ce zoom n'ouvrirait pas l'image cliquée mais une autre différente.
Donc je cherche simplement un code HTML (si possible ?) qui permettrait de cliquer au travers d'une image afin de pouvoir accéder à mon but ou bien existe-t-il un code permettant d'ouvrir une image en zoom à partir d'une différente ?
J'espère avoir été clair, merci de votre aide !
A voir également:
- Html cliquer sur une image
- Editeur html - Télécharger - HTML
- Image iso - Guide
- Légender une image - Guide
- Comment rechercher une image sur google - Guide
- Mettre une image en filigrane sur word - Guide
5 réponses
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
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/
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) ?
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.
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' />
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
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 ?
En clair, je cherche à reproduire cette action/effet (cliquer sur un produit pour l'exemple) https://bipbipboom.wixsite.com/essai!collections/c1faw
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
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 !