Rendre une image cliquable html/JS
Résolu
Bonjour à tous,
Sur mon site j'aimerais automatiser un code suivant les événements que je vais créer.
Par exemple pour un événement qui dure une semaine, je voudrais mettre une image jpg grâce à un lien temporaire, et au bout d'une semaines, basculer vers un autre jpg.
voici mon code
Le truc, c'est que j'aimerais faire un lien cliquable différent sur les deux jpg.
Un lien qui amène vers la page de l'événement créé. Et un lien qui amène vers une page "proposer votre événement"
Vous l'aurait certainement compris
Lien A -> http://www.archive-host.com
Lien B -> http://www.archive-host.com
Et c'est la que je bloque. J'ai essayer averc HREF="http://www.page.fr", mais ça ne marche pas.
Pourriez-vous me donner un coup de pouce ? ça serait très gentil !
Merci à vous !
PS : j'apprends le html de temps a autres, un peu tout seul, je manque cruellement de connaissance, et je vais apprendre de nouvelles choses avec votre aide.
Sur mon site j'aimerais automatiser un code suivant les événements que je vais créer.
Par exemple pour un événement qui dure une semaine, je voudrais mettre une image jpg grâce à un lien temporaire, et au bout d'une semaines, basculer vers un autre jpg.
voici mon code
<img class="image" src=""quot;https://www.aht.li/3033590/image_a_lien_temporaire.jpg"
alt="Not Found"
onerror= this.src=""quot;https://www.aht.li/3033591/image_de_remplacement.jpg" >
Le truc, c'est que j'aimerais faire un lien cliquable différent sur les deux jpg.
Un lien qui amène vers la page de l'événement créé. Et un lien qui amène vers une page "proposer votre événement"
Vous l'aurait certainement compris
Lien A -> http://www.archive-host.com
Lien B -> http://www.archive-host.com
Et c'est la que je bloque. J'ai essayer averc HREF="http://www.page.fr", mais ça ne marche pas.
Pourriez-vous me donner un coup de pouce ? ça serait très gentil !
Merci à vous !
PS : j'apprends le html de temps a autres, un peu tout seul, je manque cruellement de connaissance, et je vais apprendre de nouvelles choses avec votre aide.
3 réponses
-
ModérateurBonjour,
J'ai essayer averc HREF="http://www.page.fr", mais ça ne marche pas.
Et tu l'as mis où ce href ??
Il faut le mettre dans une balise <a> ... pas sur la balise <img> directement !
Un truc du genre<a href="tonlien.html" rel="nofollow noopener noreferrer" target="_blank"> <img src=""quot;tonimage.xxx"></img> </a>
PS: Cette question concerne visiblement du HTML ... pas du JAVASCRIPT !
-
je l'ai mis comme ceci (maj du code)
<a href="http://www.google.fr/" rel="nofollow noopener noreferrer" target="_blank">
<img src=""quot;https://wwwaht.li/3033590/image_a_lien_temporaire.jpg" alt="MDN"
onerror= href="http://www.yahoo.fr/">
<img this.src=""quot;https://www.aht.li/3033591/image_de_remplacement.jpg" ></a>
j'arrive a avoir la redirection avec la première image, mais pas avec la deuxième.
Je confond le HTML et JS, on voit souvent sur le web html/js, c'est de ma faute ^^
Tu pourrais m'aiguiller sur l'erreur de ma mise a jour ?
j'ai pris des site "bidon" afin de procéder aux tests. Il manque un "." entre "www" et "aht.li", pour essayer de forcer l'affichage de la deuxième image, sans succès :/ -
voici une autre mise a jour,
c'est pareil, la deuxième image ne s'affiche pas :/<a href="http://www.google.fr" rel="nofollow noopener noreferrer" target="_blank">
<img src=""quot;https://wwwaht.li/3033590/image_a_lien_temporaire.jpg"
onerror= href="http://www.yahoo.fr" rel="nofollow noopener noreferrer" target="_blank"
this.src=""quot;https://www.aht.li/3033591/image_de_remplacement.jpg"> </a>
Je n'arrive pas a voir, ou est l'erreur, les code couleur de l'éditeur ne m'en dis pas plus.
D'après les couleurs tout est bon -
@HPC8854pourquoi "quot;" apparait après mon "coller" du code ?
-
Modérateur@HPC8854
pourquoi "quot;" apparait après mon "coller" du code ?
c'est un bug de l'édteur du forum... j'ai déjà remonté le point.
Et en fait.. en relisant ton code.. si tu as bien du javascript dedans...
Je remet la discussion dans le forum js ^^
Je ne suis pas sûr de ce que tu veux faire... mais tu peux sûrement remplacer ton code par :<a href="http://www.google.fr" rel="nofollow noopener noreferrer" target="_blank" id="lien_img"> <img src=""quot;"quot;https://wwwaht.li/3033590/image_a_lien_temporaire.jpg" onerror="changeImg(this);" ></img> </a> <script type="text/javascript"> function changeImg(elm){ elm.src=""quot;"quot;https://www.aht.li/3033591/image_de_remplacement.jpg"; document.getElementById('lien_img').href="http://www.yahoo.fr"; } </script> -
@jordane45Voici ce que je cherche à faire avec des détails
J'organise plusieurs événements dans un jeu vidéo
Par exemple
du 1er au 23 - > tournoi (1)
du 1er au 7 -> course spéciale 1 (2)
du 8 au 16 -> course spéciale 2 (3)
Du 17 au 23 -. Course spéciale 3 (4)
Du 24 au 30/31 -> rien (5)
Prenons l'exemple du tournoi (1)
Afficher un jpg "tournoi 8 en cours" grâce à un lien temporaire de 3 semaine. Redirigeant vers la page "tournoi". Une fois le lien temporaire "mort/expiré" afficher un jpg "tournoi terminé" avec un lien vers la vidéo commenté du tournoi 8 ainsi terminé.
Et utiliser ce même script, en changeant juste les lien vers les jpg et les page adéquate en fonction des évènements (1)(2)(3)... Et d'autre événements à venir.
Histoire d'automatiser l'affichage des jpg, et des lien de redirection en fonction du temps des évènements créés. Ici 1 événement de 3 semaines, et 3 de 1 semaine. Je risque fort de créer des évènements de 3 mois par exemple.
J'ai juste à gérer la durée de vie du lien temporaire de mes jpg sur mon hébergeur de fichiers (pas de site)
Et vu que je suis un peu tête en l'air je ne pense pas à vérifier h24 mes image de promo de mes événements. C'est pour cela que je recherche le moyen "d'automatiser" l'affichage des jpg.
-