IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Ajouter un lien à une image sans connaître son id, juste sa SRC


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éprouvé
    Avatar de clavier12AZQSWX
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    Avril 2009
    Messages
    1 464
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Somme (Picardie)

    Informations professionnelles :
    Activité : Technicien maintenance

    Informations forums :
    Inscription : Avril 2009
    Messages : 1 464
    Par défaut Ajouter un lien à une image sans connaître son id, juste sa SRC
    bonjour,

    en javascript pur (sans jquery), je cherche à ajouter un lien à une image juste en connaissant sa valeur source (attribut src).
    J'ai tenté qqchose mais çe ne fonctionne pas et ne retourne aucune erreur, donc je comprends pas d'où provient le souci.

    mon scénario c'est :
    1 - lister les éléments avec une requête sur l'attribut SRC
    2 - je garde que le premier élément de la liste des résultats (j'ai mis un [0]) en queue du selector .
    3 - je modifie le inner html en encapsulant le lien

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <div>
    <img src="/media/toto.jpg" alt="une image sans lien">
    </div>


    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
         alert('debut script');
     
        var parentEl=document.querySelectorAll("img[src='/media/toto.jpg']")[0];
    var imgEl = parentEl.innerHtml;
    parentEl.innerHtml = '<a href="test.html">' + imgEl + '</a>';
        alert('fin script');

    voyez-vous le souci ?
    J'ai mis des balises alertes pour être sûr que ça pas d'erreur et que le script commence et se termine sans erreur. Pourtant après, le lien n'existe pas...

  2. #2
    Expert confirmé
    Avatar de ProgElecT
    Homme Profil pro
    Retraité
    Inscrit en
    Décembre 2004
    Messages
    6 130
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Décembre 2004
    Messages : 6 130
    Par défaut
    Salut

    Faute d'inattention je pense
    parentEl.innerHtml
    parentEl.innerHTML, HTML en majuscule
    :whistle:pourquoi pas, pour remercier, un :plusser: pour celui/ceux qui vous ont dépannés.
    saut de ligne
    OOOOOOOOO👉 → → Ma page perso sur DVP ← ← 👈

  3. #3
    Membre éprouvé
    Avatar de clavier12AZQSWX
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    Avril 2009
    Messages
    1 464
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Somme (Picardie)

    Informations professionnelles :
    Activité : Technicien maintenance

    Informations forums :
    Inscription : Avril 2009
    Messages : 1 464
    Par défaut
    merci pour la coquille mais étrangement ça n'a pas résolu. d'ailleurs, avec et sans majuscule ça ne produit aucune erreur !
    par contre en affichant ma variable avec
    console.log(imgEl);
    je m’aperçois qu'elle est vide donc var imgEl = parentEl.innerHTML; ne reçoit rien du sélector.

    je me demande si ça vient pas du chemin src en mode relatif (affiché par gg chrome), je vais mettre l'url complète dans le src selector pour tester....
    j'espère ne pas avoir perdu encore du temps à cause d'une fourberie de Chrome....

  4. #4
    Membre éprouvé
    Avatar de clavier12AZQSWX
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    Avril 2009
    Messages
    1 464
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Somme (Picardie)

    Informations professionnelles :
    Activité : Technicien maintenance

    Informations forums :
    Inscription : Avril 2009
    Messages : 1 464
    Par défaut
    bon, j'ai testé ma source relatif/absolu. ça ne vient pas de là.

    par contre ya un truc que je ne comprends pas.

    quand je regarde console.log(parentEl); ça renvoie bien un objet et pourtant la console F12 affiche le code html comme si c'était une variable string
    quand je regarde console.log(typeof(parentEl)); ça renvoie OBJECT et pas une string

    par contre console.log(imgEl); ne renvoie rien ! il doit donc y avoir une erreur dans ma ligne
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    var imgEl = parentEl.innerHTML;

    revoici mon code en bonne casse au cas où...
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <script>
    console.log('debut script'); 
        var parentEl=document.querySelectorAll("img[src='/media/toto.jpg']")[0];
        console.log(parentEl); 
        console.log(typeof(parentEl)); 
    var imgEl = parentEl.innerHTML;
        console.log(imgEl);
    parentEl.innerHTML = '<a href="test.html">' + imgEl + '</a>';
        console.log('fin script');
    </script>

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    teste le src de l'image dans un console.log ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  6. #6
    Membre Expert
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    Juin 2006
    Messages
    2 494
    Détails du profil
    Informations personnelles :
    Âge : 55
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2006
    Messages : 2 494
    Par défaut
    je ne sais pas si c'est ca que tu veux faire :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <img src="https://placekitten.com/99/99" /><br />
    <img src="https://placekitten.com/100/100" /><br />
    <img src="https://placekitten.com/101/101" /><br />
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    const url = 'https://placekitten.com/100/100';
    const img = document.querySelector(`img[src="${url}"]`);
    const a = document.createElement('a');
    a.href = url;
    img.after(a);
    a.append(img);
    => la 2eme image devient cliquable
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 10
    Dernier message: 19/02/2015, 12h23
  2. Réponses: 3
    Dernier message: 18/02/2013, 12h09
  3. Réponses: 13
    Dernier message: 15/05/2012, 21h44
  4. Réponses: 3
    Dernier message: 17/12/2008, 08h29
  5. Réponses: 7
    Dernier message: 19/12/2005, 08h54

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo