Discussion :

[Obturatix]

Bonjour,
J'ai un site mémoriel et si je développe des applis avec windev je ne connais rien en javascript.
sur une page web, je voudrais changer une image par une autre ( à la date anniversaire du décès je voudrais mettre une image avec une gerbe)
car en ce moment je le fais à la main et je voudrais automatiser le changement d'image.
que l'image reste de j à j+5
donc j'ai besoin d'un script JS c'est après c'est surtout après comment je récupère la variable image pour qu'elle soit affichée sur ma page web.
Voilà si quelqu'un peut m'orienter sur le comment faire.
merci
Voici mon bout de code JS : est -il correct ? et comment récupérer la variable image dans mon champ html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
     var DateEnCours = new date();
     MoisDateEncours= DateEncours.getMonth(); JourDateEnCours = DateEncours.getDate();
 
     DateDeces1 = "25/05/2015";
     MoisDateDeces1 = DateDeces1.getMonth(); JourDateDeces1 = DateDeces1.getDate();
 
 
     if (MoisDateEncours=MoisDateDeces et JourDateEncours=JourDateDeces)
     Var Image="Mes_images/DIA_1.gif"; 
     else 
     Var Image="Mes_images/DIA_0.gif";
 
</script>

Obturatix

[Eckmül]

Moi ce que je ferai perso, c'est de remplacer le contenu d'une div par une nouvelle référence à l'image :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="monImage">
       <img src="Mes_images/DIA_0.gif">
</div>

JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
monImage = document.getElementById("monImage");
 
// ton script pour vérifier la date, tu feras gaffe, il y a encore du pseudo-code et des erreurs de syntaxe
 
monImage.innerHTML = "<img src=\"" + Image + "\">

[Obturatix]

Bonjour et merci,
je regarde tout cela,
Obturatix

[VertoDebru]

Je pense que tu devra rajouter +1 a ta fonction getMonth() ...

Car pour memoire il commence le mois de Janvier a 0.
A voir

[Obturatix]

Bonjour,
Merci VertoDebru,
je compare les mois donc si c'est deux mois de janvier les deux seront à 0.
j'ai refait mon script
mais cela ne donne rien

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
var DateEncours          = new date();
var MoisDateEncours    = DateEncours.getMonth();
Var JourDateEnCours    = DateEncours.getDate();
var JourDateDeces1     = "25/05/2019";
var MoisDateDeces1     = DateDeces1.getMonth(); 
var JourDateDeces1     = DateDeces1.getDate();
var img                       = document.createElement("img");
 
     if (MoisDateEncours==MoisDateDeces1 et JourDateEncours==JourDateDeces1) { 
    img.src = "images/DIA_2.gif";
    var div = document.getElementById("monImage");
    monImage.innerHTML = "<img src="+ img.src >;
} else {   
    img.src = "images/DIA_3.gif";
    var div = document.getElementById("monImage");
    monImage.innerHTML = "<img src=" + img.src>;
    }

Et comment récupérer la nouvelle image,(dans le test je devrais avoir l'image Dia_3.gif) j'ai bien essayé le code de Eckmül , mais rien à faire çà ne passe pas.
Est-ce que ma date est bien formatée ?
Qu'est qui ne va pas dans le code ?
Mon if .... est-ce bien comme cela ?

Est-ce qu'il existe un debugger JS ?
merci de votre aide.
Obturatix

[ProgElecT]

Salut
if (MoisDateEncours==MoisDateDeces1 et JourDateEncours==JourDateDeces1) { j'ose penser que s'est une faute d’inattention car et dans une condition if doit être &&.

Est-ce qu'il existe un debugger JS ?

il y en a un gratuit, ton navigateur F12 en général, et Console.log() dans ton code.

[VertoDebru]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
// Récupérer la date actuelle
var DateEncours = new date();
var MoisDateEncours = DateEncours.getMonth()+1;
Var JourDateEnCours = DateEncours.getDate();
// Récupérer la date du décès
var DateDeces1 = "25/05/2019";
var MoisDateDeces1 = DateDeces1.getMonth()+1; 
var JourDateDeces1 = DateDeces1.getDate();
// La tu créé un <img>
var img = document.createElement("img");
//Tu récupere le <div> qui contiendra ton <img>
var div = document.getElementById("monImage");
 
if (MoisDateEncours==MoisDateDeces1 && JourDateEncours==JourDateDeces1) 
{ 
    img.src = "images/DIA_2.gif";
} else {   
    img.src = "images/DIA_3.gif";
}
div.appendChild(img); // Tu insère ton <img> dans le <div id="monImage">

[Obturatix]

Bonjour à tous les deux et merci pour votre aide.
Ben non, ce n'était pas de l'inattention mais une non connaissance du langage JS à la limlite j'aurai au moins du mettre and pour le if...
par contre c'est ok pour le +1 des mois, surprenant que janvier ne soit pas =1 , doit bien y avoir une raison qui m'échappe...
Pour le reste ok pour les corrections du script js.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
    var DateEncours          = new date();
    var MoisDateEncours    = DateEncours.getMonth()+1;
    var JourDateEnCours    = DateEncours.getDate();
    var JourDateDeces1     = "25/05/2021";
    var MoisDateDeces1     = DateDeces1.getMonth()+1; 
    var JourDateDeces1     = DateDeces1.getDate();
    var img= document.createElement("img");
    var div = document.getElementById("monImage");
     if (MoisDateEncours==MoisDateDeces1 && JourDateEncours==JourDateDeces1) { 
    img.src = "images/Dia_2.gif";
} else {   
    img.src = "images/Dia_3.gif";
    }
    div.appendChild(img); // Tu insère ton <img> dans le <div id="monImage">
</script>

j'ai mis dans le head un lien vers ce script ( mis à la racine de mon site)
Dans le body j'ai mis cela :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="monImage" >
      <img src="images/Dia_0.gif">
 
</Div>

j'ai bien l'affichage de dia_0.gif mais pas dia_3.gif que je devrais avoir en fonction du script js
C'est le après // Tu insère ton <img> dans le <div id="monImage">.
que je n'arrive pas à faire.
merci de l'aide apportée
Obturatix

[Eckmül]

Pour le mois de janvier qui commence à 0, cela vient surement du fait que ces les index de tableau qui commencent à 0 dans le JS

Pour la fermeture de ta div, on ne met pas de majuscule.
la fonction new Date() prend une majuscule
DateDeces1 n'existe pas dans ton programme je suppose que c'est "25/05/2021" mais tu l'as mal rentrée, de plus il faut le rentrer en New Date pour que ça soit le bon format

Cela donnerait plus un truc comme ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="monImage" >
    <img src="public/img/ARC_TRIOMPHE_SURF.PNG">
 
</div>
<script type="text/javascript">
    var DateEncours = new Date();
    var MoisDateEncours = DateEncours.getMonth()+1;
    var JourDateEnCours = DateEncours.getDate();
    var DateDeces1 = new Date("26/05/2021");
    var MoisDateDeces1 = DateDeces1.getMonth()+1; 
    var JourDateDeces1 = DateDeces1.getDate();
    var img= document.createElement("img");
    var div = document.getElementById("monImage");
    if (MoisDateEncours==MoisDateDeces1 && JourDateEncours==JourDateDeces1)
    { 
        img.src = "public/img/AERODROME_PONC.PNG";
    }
    else
    {   
        img.src = "public/img/ANTENNE.PNG";
    }
    div.appendChild(img); // Tu insère ton <img> dans le <div id="monImage">
</script>

[NoSmoking]

Bonjour,

Voici mon bout de code JS : est -il correct ?

tout à était presque dit, JavaScript comme tout langage à une syntaxe et il faut la respecter et notamment le « caseSensitive », Date est différent de date.

• Concernant la gestion de ton image, je ne vois pas pourquoi ne pas modifier l'attribut src d'un élément <img> plutôt que de re-créer ce qui existe.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="conteneur">
 <img id="monImage" src="images/default-image.png" alt="">
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
const elImage = document.getElementById("monImage");
elImage.src = "images/nom-nouvelle-image.png";

• Concernant le calcul de la date, et attendu que tu veux faire un test avec une prise en compte sur 5 jours, il ne te sert à rien de récupérer les mois et jour, il te faut faire directement une comparaison sur le « time » des dates en mettant la même année, celle du jour de la lecture, à la date du décès.

Exemple de code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function testDate( dateRef){
  const msPerDay = 86400000;
  const msDelay = msPerDay * 5;
 
  // date du jour sans les h:m:s
  const toDay = new Date();
  toDay.setHours(0, 0, 0, 0);
  // date décés sans h:m:s    
  const dDeces = new Date(dateRef);
  dDeces.setHours(0, 0, 0, 0);
 
  // mise à la même année pour test
  dDeces.setFullYear(toDay.getFullYear());
 
  // récup. ms pour test
  const timeDay = toDay.getTime();
  const timeDeces = dDeces.getTime();
  const timeMax = timeDeces + msDelay;
 
  return (timeDeces <= timeDay && timeDay < timeMax);
}

[Edit] correction du code pour le rendre plus « facilement » compréhensible

Exemple d'utilisation :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
const dateDeces = "2015-05-26";
if (testDate(dateDeces)) {
  const elImage = document.getElementById("monImage");
  elImage.src = "images/nom-nouvelle-image.png";
}

Voilà une façon de faire.

Ressource :

• Date - JavaScript | MDN

[Obturatix]

Bonjour et merci ( No smoking et Eckmül et aux autres intervenants...)
@Eckmül -> je corrige de suite.
@No Smoking -> je regarde et je vais essayer de comprendre.
Obturatix

[Obturatix]

Bonjour,
C'est sur avec en plus le délai de 5 jours le code est parfait.
Après c'est toujours mon problème : je n'arrive pas à comprendre comment récupérer la nouvelle image pour qu'elle soit sur ma page.
Dans le code html j'ai toujours l'image de base.
Où faut il placer le code JS , perso je l'enregistre dans un fichier *.js et dans le head je met un lien vers lui mais rien ne se passe.
Bonne soirée
cordialement
Obturatix

[VertoDebru]

j'ai mis dans le head un lien vers ce script ( mis à la racine de mon site)
Dans le body j'ai mis cela :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="monImage" >
      <img src="images/Dia_0.gif">
</Div>

j'ai bien l'affichage de dia_0.gif mais pas dia_3.gif que je devrais avoir en fonction du script js

C'est normal tu dois définir ton script comme une fonction et appeler celle-ci quand tu charge ta page / quand tu clique sur un bouton.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
function calculate()
{
    var DateEncours          = new date();
    var MoisDateEncours    = DateEncours.getMonth()+1;
    var JourDateEnCours    = DateEncours.getDate();
    var DateDeces1     = "25/05/2021";
    var MoisDateDeces1     = DateDeces1.getMonth()+1; 
    var JourDateDeces1     = DateDeces1.getDate();
    var img= document.createElement("img");
    var div = document.getElementById("monImage");
     if (MoisDateEncours==MoisDateDeces1 && JourDateEncours==DateDeces1) { 
    img.src = "images/Dia_2.gif";
} else {   
    img.src = "images/Dia_3.gif";
    }
    div.appendChild(img); // Tu insère ton <img> dans le <div id="monImage">
}
</script>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<body onload="calculate()">
<div id="monImage" >
      <img src="images/Dia_0.gif">
</Div>
<button onclick="calculate()">Calculate</button>
</body>

[Obturatix]

Bonjour à tous,
bon je suis un peu paumé dans tous ces codes ( mon âge probablement (70) et ma méconnaissance de JS.
Je voudrai repartir sur de bonnes bases et vous remerciant de passer du temps à résoudre mon problème.
Voilà on efface tout et on repars sur le code de NoSmoking qui correspond exactement à mon besoin.
j'ai un gif avec six photos avec la date du décès.Mon besoin était de mettre une image de gerbe de fleur à la date du décès et pendant 5 jours...(mes 6 gif + celui de base sont prêts) et No smoking à très bien fait le code.
Quand j'aurais changé une image par une autre ce sera parfait après j'essayerai de gérer pour les 5 autres .
donc j'ai créer un fichier TestelaDateDeDeces.js comme celui de No Smoking qui est appellé dans le head comme ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="https://www.nomdedomaine.fr/TesteLaDateDeDeces.js"></script>

et le fichier TesteLaDateDeDeces.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function testDate( dateRef){
  const msPerDay = 86400000;
  const msDelay = msPerDay * 5;
 
  // date du jour sans les h:m:s
  const toDay = new Date(new Date().toDateString());
  // date décés sans h:m:s    
  const dDeces = new Date(dateRef);
  // mise à la même année pour test
  dDeces.setFullYear(toDay.getFullYear());
 
  // récup. ms pour test
  const timeDay = toDay.getTime();
  const timeDeces = dDeces.getTime();
  const timeMax = timeDeces + msDelay;
 
  return (timeDeces <= timeDay && timeDay < timeMax);
}

et je mets dans un champ html ce code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div>
<img src="images/Nom-image-de-base.gif">
<script>
const dateDeces = "2015-05-26";
if (testDate(dateDeces)) {
  const elImage = document.getElementById("monImage");
  elImage.src = "images/nom-nouvelle-image.gif";
}
 
</script>
</div>

et bien entendu car je fais une erreur quelque part cela ne donne aucune image.
qu'est-ce-que je fais mal?
merci
obturatix

[Eckmül]

Dans ton dernier message, il n'existe plus de div avec l'identifiant "monImage" du coup je pense qu'il y a un soucis sur l'attribution de la source de l'image, mais du coup soit tu utilise la commande :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

elImage.src = "images/nom-nouvelle-image.gif";

et du coup tu nommes ta balise img avec un id "monImage"
Soit tu utilises :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

elImage.innerHTML = "<img src='images/nom-nouvelle-image.gif'>";

et tu nommes la div avec un id "monImage"

[NoSmoking]

Pour info :

• J'ai corrigé le code de la fonction testDate pour le rendre plus compréhensible et accessoirement moins bogué
• Les dates doivent être au format YYYY-MM-DD afin d'éviter les écueils liés à la gestion des dates.

@VertoDebru :
dans ton code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var JourDateDeces1     = "25/05/2021";
var MoisDateDeces1     = DateDeces1.getMonth()+1; 
var JourDateDeces1     = DateDeces1.getDate();

la variable DateDeces1 n'est pas définie.

@Eckmül :
modifier l’attribut src reste plus propre que de modifier le contenu d'un élément à coup de innerHTML, et lorsque l'on peut s'en passer autant le faire.

@Obturatix :

Quand j'aurais changé une image par une autre ce sera parfait après j'essayerai de gérer pour les 5 autres

non autant avoir à l'esprit tout de suite que tu va avoir à faire une boucle.

Une remarque, pour pouvoir atteindre les éléments via JavaScript il faut que ceux-ci soient présent dans le DOM.
Il te faut donc attendre que ta page soit chargée avant d'entreprendre tes modification, cela va conditionner la façon d'appeler la fonction et à quel moment.

Pour que tu puisses lancer l'action il faut également que la date de décès soit disponible, par exemple via un data-deces et que toutes les images à traiter soient facilement récupérable ce qui sera le cas si les data-deces sont affectés aux images.

Je ne sais pas si cela est bien clair pour toi ?

[VertoDebru]

@VertoDebru :
dans ton code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var JourDateDeces1     = "25/05/2021";
var MoisDateDeces1     = DateDeces1.getMonth()+1; 
var JourDateDeces1     = DateDeces1.getDate();

la variable DateDeces1 n'est pas définie.

Pour me défense je l'ai fait vite fais a presque 2h du mat'

Suffit juste de changer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var DateDeces1 = "25/05/2021";

[Obturatix]

Bonjour à tous et merci encore pour vos interventions
@Eckmül
J'utilise le code de NoSmoking donc

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
  elImage.src = "images/logo_1.png";
}

mais dans mon code html je ne vois toujours pas comment faire.je suis une cruche
je viens de passer quelques heures à lire JS pour les débutants ,pour les nuls mais toujours rien de concret

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id=monImage>
<script
const dateDeces = "2015-05-27";
if (testDate(dateDeces)) {
  const elImage = document.getElementById("monImage");
  elImage.src = "images/logo_1.png";
} else {
  const elImage = document.getElementById("monImage");
  elImage.src = "images/logo_2.png";
} else 
<
</script>
</div>

@NoSmoking
Je crois qu'il ne faut pas que j'aille trop vite , tant que je n'aurai par réussi à changer l'image de base par une autre, ce n'est pas la peine d'aller plus loin.
j'ai bien vu pour faire un tableau et une boucle mais reste toujours de voir une image différente en fonction de la date.
me reste encore du temps la prochaine date de décès est le 14/07.Si je n'ai pas réussi je mettrai à la main.
Bonne fin d'après midi
Obturatix

[ProgElecT]

Salut

J'ai pas vraiment tout suivit, mais la syntaxe/structure du dernier code fournit ne va assurément pas
Cela devrait plutôt ressembler à

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
	</head>
   <style>
       #monImage{
        height:50px;
        width:48px;
        background-repeat:no-repeat;
      }
    </style>
	<body>
	<div id="monImage"></div>
	<script>
                window.addEventListener("DOMContentLoaded", (event) => {
                        const dateDeces = "2015-05-27";
                        const elImage = document.getElementById("monImage");
                        if (testDate(dateDeces)) {
                                elImage.style.backgroundImage = "url(images/logo_1.png)";
                                } else {
                                elImage.style.backgroundImage = "url(images/logo_2.png)";
                        }
                        //alert("DOM entièrement chargé et analysé");
                });
                function testDate( dateRef){
                        const msPerDay = 86400000;
                        const msDelay = msPerDay * 5;
 
                        // date du jour sans les h:m:s
                        const toDay = new Date();
                        toDay.setHours(0, 0, 0, 0);
                        // date décés sans h:m:s    
                        const dDeces = new Date(dateRef);
                        dDeces.setHours(0, 0, 0, 0);
 
                        // mise à la même année pour test
                        dDeces.setFullYear(toDay.getFullYear());
 
                        // récup. ms pour test
                        const timeDay = toDay.getTime();
                        const timeDeces = dDeces.getTime();
                        const timeMax = timeDeces + msDelay;
 
                        return (timeDeces <= timeDay && timeDay < timeMax);
                }
        </script>
	</body>
</html>

[NoSmoking]

Je crois qu'il ne faut pas que j'aille trop vite , ...

Ce n'est pas une question de vitesse mais de cohérence de ce que tu cherches à faire, ce qui est valable dans un cas ne l'est pas forcément dans une autre contexte.

... tant que je n'aurai par réussi à changer l'image de base par une autre, ce n'est pas la peine d'aller plus loin.

Tu sais changer une image par une autre en modifiant l'attribut src.

Le soucis maintenant est de savoir par quoi le remplacer.

j'ai bien vu pour faire un tableau et une boucle mais reste toujours de voir une image différente en fonction de la date.

Tout cela est lié et maintenant que j'ai compris ce que tu voulais faire cela est plus facile d'expliquer.

Je résumes pour voir.

Au départ tu as le code HTML suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<img id="wa-compimage-kj6vxa4j4ri7tk" alt="" class="wa-image-component " src="wa_images/DeadInAction.gif?v=1fvb5a3">

donc un élément <img> avec une image par défaut, c'est un gif animé style carousel de personnes, qui doit rester affichée si il n'y a pas de date anniversaire correspondante.
Tu as également réalisé n images qui correspondent aux n personnes avec personnalisation, ajout de la gerbe.

Pour résumer c'est la correspondance que tu cherches à faire pour afficher la bonne image en fonction de la date.

Donc, oui, il te faut gérer cela via un objet, par exemple, qui te donne la relation entre date et image à afficher.

Par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
const imgDatas = {
  "2006-03-04": "wa_images/DeadInAction_1.gif?v=1gaumhd",
  "2006-08-25": "wa_images/DeadInAction_2.gif?v=1gaumhd",
  "2010-12-18": "wa_images/DeadInAction_3.gif?v=1gaumhd",
  "2011-07-14": "wa_images/DeadInAction_4.gif?v=1gaumhd",
  "2019-05-10": "wa_images/DeadInAction_5.gif?v=1gaumhd"  // j'ai noté 2 événements pour cette date, une seule image devrait suffire
};

ce sont tes données de départ.

Il te faut boucler sur cet objet, en récupérant la date, la clé, et afficher l'image si c'est ok.
Une façon simple de faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
// récup. image destination
const oImg = document.getElementById("wa-compimage-kj6vxa4j4ri7tk");
// parcours toutes les dates
// voir https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
Object.keys(imgDatas).forEach( function(date) {
  if (testDate(date)) {
    oImg.src = imgDatas[date];
  }
});

Au final ton code se résume à :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// Initialisation après chargement du DOM
document.addEventListener("DOMContentLoaded", function() {
 
  // Initialisation après chargement du DOM
  function testDate(dateRef) {
    const msPerDay = 86400000;
    const msDelay = msPerDay * 5;
 
    // date du jour sans les h:m:s
    const toDay = new Date();
    toDay.setHours(0, 0, 0, 0);
    // date décés sans h:m:s    
    const dDeces = new Date(dateRef);
    dDeces.setHours(0, 0, 0, 0);
 
    // mise à la même année pour test
    dDeces.setFullYear(toDay.getFullYear());
 
    // récup. ms pour test
    const timeDay = toDay.getTime();
    const timeDeces = dDeces.getTime();
    const timeMax = timeDeces + msDelay;
 
    return (timeDeces <= timeDay && timeDay < timeMax);
  }
  // les données à manipuler
  const imgDatas = {
    "2006-03-04": "https://www.unc-35760.fr/wa_images/DeadInAction_1.gif?v=1gaumhd",
    "2006-08-25": "https://www.unc-35760.fr/wa_images/DeadInAction_2.gif?v=1gaumhd",
    "2010-12-18": "https://www.unc-35760.fr/wa_images/DeadInAction_3.gif?v=1gaumhd",
    "2011-07-14": "https://www.unc-35760.fr/wa_images/DeadInAction_4.gif?v=1gaumhd",
    "2019-05-10": "https://www.unc-35760.fr/wa_images/DeadInAction_5.gif?v=1gaumhd",
  };
  // récup. image destination
  const oImg = document.getElementById("wa-compimage-kj6vxa4j4ri7tk");
  // parcours toutes les dates
  Object.keys(imgDatas).forEach( function(date) {
    if (testDate(date)) {
      oImg.src = imgDatas[date];
    }
  });
});

Tu peux mettre ce <script> où tu veux dans ta page ou dans un fichier externe.

Si je me suis planté , j'aurais dû regarder ton lien avant de te faire ma dernière réponse, et si non on attend tes remarques.