Rendre une image cliquable html/JS [Résolu/Fermé]

Signaler
Messages postés
114
Date d'inscription
mercredi 27 mai 2015
Statut
Membre
Dernière intervention
26 mai 2017
-
Messages postés
114
Date d'inscription
mercredi 27 mai 2015
Statut
Membre
Dernière intervention
26 mai 2017
-
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
<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

Messages postés
29581
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 septembre 2020
2 790
Bonjour,

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 !
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 60889 internautes nous ont dit merci ce mois-ci

Messages postés
114
Date d'inscription
mercredi 27 mai 2015
Statut
Membre
Dernière intervention
26 mai 2017
4
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
Messages postés
114
Date d'inscription
mercredi 27 mai 2015
Statut
Membre
Dernière intervention
26 mai 2017
4 >
Messages postés
114
Date d'inscription
mercredi 27 mai 2015
Statut
Membre
Dernière intervention
26 mai 2017

pourquoi "quot;" apparait après mon "coller" du code ?
Messages postés
29581
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 septembre 2020
2 790 >
Messages postés
114
Date d'inscription
mercredi 27 mai 2015
Statut
Membre
Dernière intervention
26 mai 2017

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>
Messages postés
114
Date d'inscription
mercredi 27 mai 2015
Statut
Membre
Dernière intervention
26 mai 2017
4 >
Messages postés
29581
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 septembre 2020

Voici 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.
Messages postés
114
Date d'inscription
mercredi 27 mai 2015
Statut
Membre
Dernière intervention
26 mai 2017
4 >
Messages postés
29581
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 septembre 2020

je reviens vers toi pour un complément d'information, car je rencontre des bug que je n'avais pas prévu.

j'ai besoin de mettre le code que tu m'as gentiment donné plusieurs fois par page.
L'image et le lien de remplacement sont différents à chaque fois. Je m'explique avec ce code

<a href="http://www.google.fr" rel="nofollow noopener noreferrer" target="_blank" id="lien_img">
<img src=""quot;"quot;"quot;"quot;"quot;https://wwwaht.li/3033590/image_a_lien_temporaire2.jpg"
onerror="changeImg(this);" ></img>
</a>

<script type="text/javascript">
function changeImg(elm){
elm.src=""quot;"quot;"quot;"quot;"quot;https://www.aht.li/3033591/image_de_remplacement2.jpg";
document.getElementById('lien_img').href="http://www.yahoo.fr";
}
</script>

___

<a href="http://www.google.fr" rel="nofollow noopener noreferrer" target="_blank" id="lien_img">
<img src=""quot;"quot;"quot;"quot;"quot;https://wwwaht.li/3033590/image_a_lien_temporaire1.jpg"
onerror="changeImg(this);" ></img>
</a>

<script type="text/javascript">
function changeImg(elm){
elm.src=""quot;"quot;"quot;"quot;"quot;https://www.aht.li/3033591/image_de_remplacement1.jpg";
document.getElementById('lien_img').href="http://www.yahoo.fr";
}
</script>



est sur mes deux emplacement, j'ai que l'image de remplacement 2 qui s'affiche, pourtant le lien est bon sur le premier bloc html/JS

j'ai pensé qu'il s'agit certainement d'un conflit.
Puis-je changer les "ID" en faisant comme ceci pour chaque fois que je mets le script sur la page ?

id="lien_img1"
id="lien_img2"
id="lien_img3"
id="lien_img4"

(sur la page d'acceuil, j'ai besoin de le mettre 6 fois)

Voici une capture d'écran :
https://www.dropbox.com/s/29v8iflt4l018el/Capture%20d%27%C3%A9cran%202017-03-06%2008.07.52.png?dl=0

l'image de remplacement 1 ne s'affiche pas, certainement parce que les codes sont l'un derrière l'autre,

cependant, quand je place 2 bloc html distincts à deux endroit différent de la page, j'ai le même soucis
Messages postés
5882
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
5 septembre 2020
1 270
Bonjour,

En HTML, ce n'est pas possible, il faut utiliser un langage de script (JavaScript ou PHP).

Il faut créer les deux liens, indépendamment l'un de l'autre et mettre une condition pour afficher l'un ou l'autre.

A toi de déterminer la condition et comment l'appliquer.
Messages postés
114
Date d'inscription
mercredi 27 mai 2015
Statut
Membre
Dernière intervention
26 mai 2017
4
Un grand merci jordane45 pour le script.
Il fonctionne comme je le recherche !

Je vais l'étudier pour en comprendre plus précisément le code.

Comme je l'ai dis plus haut "j'apprends".

Et tu viens de m'apprendre un peu de JS !

Merci beaucoup de ton aide !

Dugenou, effectivement en HTML je ne pense pas que ce soit possible (pas dynamique)

Et je ne peux malheureusement pas utiliser de PHP. Que du HTML/JS.

Merci à vous deux !