Discussion :

[Obturatix]

Bonjour à tous et en particulier à Nosmoking,
le code de Nosmoking ( https://www.developpez.net/forums/d2.../#post11726424)que j'utilise me sert pour différents évènements

j'aimerai pouvoir sur l'image en cours cliquer dessus et allez sur un lien ( ouvrir les état s de service) de la personne dcd.
(https://www.unc-35760.fr/devoirsmemoire-fmc.html)
Si Nosmoking peut encore m'aider.
Est-ce que je peux mettre le lien dans les datas ( à la suite de la date et de lien image ?) et comment le récupérer pour qu'un clic ouvre le lien l'image?

Revoici le 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
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];
    }
  });
});

merci pour l'aide
cordialement
Obturatix

[SpaceFrog]

Soit tu encadres ton image dans le html avec une balise a et tu l'atteins au moyen du lien de Parenté pour attribuer le href

soit tu peux mettre un data-href à ton image et gerer le lien sur le click de l'image en js ...

[NoSmoking]

Bonjour,
dans l'absolue les solutions fournies par SpaceFrog sont tout à fait judicieuses seulement cela n'est pas applicable dans ton cas

La raison en est simple, tu utilises une image GIF qui fait défiler tes différentes personnes, mais tu n'as pas de moyen de savoir au moment du clic quelle frame de ton image GIF, donc quelle personne, est en cours d'affichage, il va te falloir trouver autre chose .

[Obturatix]

Bonjour à vous deux,
et merci pour le retour.
Je me suis mal exprimé,
En fonction de la date du jour j'ai une image Gif, la normale : 0.gif, et les autres avec les gerbes, 1.Gif,....6.Gif selon la date du décès et le délais de 5 jours.
C'est en fonction de cette image, peu importe à quel moment du gif je suis, le clic doit amener vers un lien page1.html, page2.html, si c'est la normale page0.html
je dois donc avoir 7 liens liés aux 7 images gif.
6 images sont référencés dans les const imgDatas
Donc comment et ou placer ce lien, est-ce que l'on peut l'extraire des datas ? et pour le clic ?
merci de votre aide.
Obturatix

[NoSmoking]

Dans le cas où cela concerne la journée et non pas la personne tu peux effectivement faire cela simplement.

• Il faut modifier légèrement le HTML en encapsulant l'image dans une balise <a> :

Code html :

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

1
2
3
4
5
<div class="wrapper-img">
  <a id="lien-image">
    <img id="mon-image" alt="" src="image_0.gif?v=1gaumhd"  >
  </a>
</div>

• Il faut également modifier la structure des données :

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
const imgDatas = {
  "2006-03-24": {
    img: "image_1.gif?v=1gaumhd",
    href: "page-1.html"
  },
  "2006-08-25": {
    img: "image_2.gif?v=1gaumhd",
    href: "page-2.html"
  },
  "2010-12-18": {
    img: "image_3.gif?v=1gaumhd",
    href: "page-3.html"
  },
  "2011-07-14": {
    img: "image_4.gif?v=1gaumhd",
    href: "page-4.html"
  },
  "2019-05-10": {
    img: "image_5.gif?v=1gaumhd",  
    href: "page-5.html"
  },
};

à chaque date est liée une image et une liaison vers la page à afficher.

• Pour la mise en place au chargement il suffit d'affecter le lien et la source de l'image :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
  // récup. image destination
  const oImg = document.getElementById("mon-image");
  // récup. lien sur image
  const oLien = document.getElementById("lien-image");
  // parcours toutes les dates
  Object.keys(imgDatas).forEach( function(date) {
    if (testDate(date)) {
      oImg.src = imgDatas[date].img;
      oLien.href = imgDatas[date].href;
    }
  });

[Obturatix]

Bonsoir et merci pour les codes,
J'ai remis en place avec les liens des images et le délais...
mais je dois mal placer les codes car je n'ai pas l'image 1 avec gerbe :

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
<div class="wrapper-img">
  <a id="lien-image"
  <img id="mon-image" alt="" src="https://www.unc-35760.fr/Images_Externes/DeadInAction.gif"  >
 </a>
<script>
</div>
<script>
// Initialisation après chargement du DOM
document.addEventListener("DOMContentLoaded", function() {
  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);
  }
 
  // récup. image destination
 const oImg = document.getElementById("mon-image");
  // récup. lien sur image
  const oLien = document.getElementById("lien-image");
  // parcours toutes les dates
  Object.keys(imgDatas).forEach( function(date) {
    if (testDate(date)) {
      oImg.src = imgDatas[date].img;
      oLien.href = imgDatas[date].href;
    }
  });
</script>

Qu'est-ce je recopie mal ?
merci de l'aide
Obturatix