11348 sujets

JavaScript, DOM et API Web HTML5

Bonjour !

Je cherche à cibler une image spécifique de mon site grâce à son URL pour pouvoir la remplacer par du texte (et mettre le tout en forme via le CSS). Pour l'instant, j'ai réussi à attribuer un id à l'image en question :
$(function() {
    var c = 'https://twemoji.maxcdn.com/16x16/1f421.png';
    $('img[src="' + c + '"]').each(function() {
        $(this).attr('id', 'oki').html('Épinglé');
    });
});

Etant encore débutante en JS, je me demandais s'il existait un script pour maintenant remplacer l'image par du texte.

Merci et bonne journée Smiley biggrin
Modifié par holen (25 Apr 2020 - 09:10)
Modérateur
Si tu vas sur la piste des attributs, alors, tu peux eventuellement vider l'attribut src et mettre à jour (ou ajouter) l'attribut alt que l'image affichera alors.

astuce possible :
let text="Alsacréations";//le text à afficher
let img ="https://cdn.alsacreations.net/css/img/logo-alsacreations.svg";//l'image a enlever
let imgToDel = document.querySelector('[src="'+ img +'"]');
imgToDel.setAttribute('alt',text);
imgToDel.setAttribute('src','')


demo https://codepen.io/gc-nomade/pen/WNQjbvW (tu y trouveras aussi le code nécessaire pour le cas de plusieurs images identiques qui peuvent se répéter au long de ta page))
Modifié par gcyrillus (27 Apr 2020 - 14:55)
// ==UserScript==
// @name     _YOUR_SCRIPT_NAME
// @include   http://YOUR_SERVER.COM/YOUR_PATH/*
 
// @require   http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
 
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

// smilies/goofyimage.png is case-sensitive
var goofyImages = $("img[src*='smilies/goofyimage.png']");

goofyImages.replaceWith ("<b>[CLICK]</b>");


essayez d'utiliser cela, je l'ai utilisé dans mon site Web et cela a parfaitement bien fonctionné

Moderation : bienvenue sur le forum, cependant j'ai retirer le lien que tu as fournis, celui-ci menant sur une page ne donnant aucune information pertinente sur le sujet traité. Je t'invite aussi a donné une petite explication sur l'usage du code que tu proposes.

Modifié par gcyrillus (28 Apr 2020 - 16:54)
Meilleure solution