11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Remplacer une <img> en fonction de la class du <body

Bonjour,

Je cherche à remplacer une <img> en fonction de la classe du <body>, en JS.

Si ma page est <body class="page-sombre">
Alors elle doit afficher <img src="image-pour-page-sombre.png">

Si ma page est <body class="page-claire">
Alors elle doit afficher <img src="image-pour-page-claire.png">

Et je voudrais rajouter ça dans un <script>, mais je n'ai aucune idée de comment faire ?

Merci aux bonnes âmes qui pourront me filer un coup de main.
Tu fais un test sur ton body et suivant, tu applique tel ou tel autre classe pour une backgroun image que tu souhaites
if ($("body").hasClass("page-sombre"))
{
    $("body").css("background-image", "//tonfichierimage");
}
Modérateur
Salut,

Et sinon tu peux pas changer l'url de l'image en php directement ? Comme quand tu colles la classe sur le body, tu colles la bonne URL dans le src... pas possible ?

Bonne aprem
Merci pour votre aide.

JENCAL a écrit :
Tu fais un test sur ton body et suivant, tu applique tel ou tel autre classe pour une backgroun image que tu souhaites
if ($("body").hasClass("page-sombre"))
{
    $("body").css("background-image", "//tonfichierimage");
}
Il faut absolument remplacer le SRC de la balise IMG ; sans ça je n'aurais même pas besoin de JS et pourrais le tester en CSS avec 
body.sombre selecteur {background-image:url('');}
La difficulté est précisément que l'image est inscrite en dur dans le code.

_laurent a écrit :
Et sinon tu peux pas changer l'url de l'image en php directement ? Comme quand tu colles la classe sur le body, tu colles la bonne URL dans le src... pas possible ?
Non, c'est un thème WP super lourd, avec des centaines de fichiers imbriqués ; ce serait très compliqué de le faire en PHP.
Modifié par Adage (20 Sep 2018 - 15:45)
si c'est la SRC de l'image, tu détruit l'élement image, et tu le reconstruit en JS alors...

tu le cible, tu fais un remove() dessus et tu le recréer avec append()
si c'est la SRC de l'image, tu détruit l'élement image, et tu le reconstruit en JS alors...

tu le cible, tu fais un remove() dessus et tu le recréer avec append()
Si tu as des problèmes avec le ciblage, tu peux toujours partager ton site et nous pourrions te dire d'avantages
JENCAL a écrit :
Si tu as des problèmes avec le ciblage, tu peux toujours partager ton site et nous pourrions te dire d'avantages
Merci !
En fait c'est même plus avec le JS qu'avec le ciblage que j'ai des problèmes Smiley confus
Sur cette page par exemple, le fond est clair, et l'objectif est donc de remplacer le logo blanc par ce logo noir.
Le sélecteur en l'occurence est body.page-id-2096
Modifié par Adage (20 Sep 2018 - 16:45)
dans le if body du coup
 $(".fusion-standard-logo").attr("src","//ton url image");

mais tu as une erreur console (index):6 Uncaught ReferenceError: jQuery is not defined
at (index):6
Modifié par JENCAL (20 Sep 2018 - 16:52)
JENCAL a écrit :
dans le if body du coup
 $(".fusion-standard-logo").attr("src","//ton url image");
Merci !
J'ai donc essayé ça : 
<script type="text/javascript">
if ($("body").hasClass("page-id-2096"))
{
    $(".fusion-standard-logo").attr("src","/wp-content/uploads/logo_210x75_dark-1.png");
}
</script>
Mais j'ai une nouvelle erreur : "Uncaught TypeError: $ is not a function"

L'autre erreur semble liée à la minification, et a été résolue à sa désactivation.
Modifié par Adage (18 Nov 2019 - 05:51)
Uncaught TypeError: $ is not a function
veut te dire que tu n'a pas jquery.
Il faut le rajouter, il n'est pas natif. c'est une librairie.
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Modifié par JENCAL (20 Sep 2018 - 17:15)
Ah, c'est bon maintenant avec : 
<script>
jQuery(function($){
    if ($("body").hasClass("page-id-2096"))
    {
        $(".fusion-standard-logo").attr("src","/wp-content/uploads/logo_210x75_dark-1.png");
        $(".fusion-standard-logo").attr("srcset","/wp-content/uploads/logo_210x75_dark-1.png 1x, /wp-content/uploads/logo_420x150-1.png 2x");
        
    }
});
</script>


Merci encore !!
Modifié par Adage (18 Nov 2019 - 05:52)
Sujet clos
Aller à