Rajouter un lien sur l'image en cours

Version imprimable

Bonjour à tous et en particulier à Nosmoking,
le code de Nosmoking ( https://www.developpez.net/forums/d2.../)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:

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

16/06/2021, 13h34
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 ...
16/06/2021, 16h26
NoSmoking

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

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 ;).
16/06/2021, 16h40
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

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:

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:

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:

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;
    }
  });

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:

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

Dans le tout dernier code que tu as envoyé trois erreurs se sont glissées :

Ta balise <a> est mal fermée, tu as oublié un > dans <a id="lien-image" <img [...]>
Tu as mis en double la balise ouvrante <script>
Autre erreur ensuite dans le JS avec document.addEventListener("DOMContentLoaded", function() { [...] qui n'est jamais fermé, il manque donc un }) à la fin du script.

Pour le reste une fois ces trois petites erreurs fixées tout as l'air de fonctionner, voila le code avec ces correctifs :

Code:

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
<div class="wrapper-img">
  <a id="lien-image"><img id="mon-image" alt="" src="https://www.unc-35760.fr/Images_Externes/DeadInAction.gif"></a>
</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>

17/06/2021, 09h50
Obturatix

Bonjour à tous,
merci vraiment un grand merci pour tous ceux qui sont intervenus pour résoudre ce problème.
Le :boulet:: vous dit :merci::merci::applo::applo:
:resolu:

Bonjour à tous et à NoSmoking,
:oops:ah ah encore moi :scarymov: :pastaper: :pastaper:
Eh oui à l'usage je m'aperçois qu'il y a quelque chose qui manque.
Tout est très bien sauf que le lien s'ouvre sur la page d'origine....et il faudrait que le lien s'ouvre sur l'onglet suivant
j'ai beau mettre de différentes manières le target="_blanc" ça reste toujours sur la page d'origine.
Donc ma question est où dois je mettre correctement ce " target=_blank"
- dans le lien des const imgDatas ?
Code:

1 2 3 4 5 6 7 const imgDatas = { //Pour tests du jour actuel "2020-06-15": { img: "https://www.unc-35760.fr/Images_Externes/Commando_De_Penfentenyo.png", href: "https://www.unc-35760.fr", duree:10 },
où directement dans le code
Code:

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

18/06/2021, 16h51
tag9724
L'attribut target="_blank" se met sur la balise <a>
Dans ton cas le plus simple et le plus propre serais de le mettre directement dans ton code HTML
Code:

1 2 3 4 5 <div class="wrapper-img"> <a id="lien-image" target="_blank"> <img id="mon-image" alt="" src="image_0.gif?v=1gaumhd" > </a> </div>
Alternativement tu pourrais aussi rajouter l'attribut via le code javascript
Code:

1 2 3 oLien.target = "_blank" // Ou encore oLien.setAttribute( "target", "_blank")
18/06/2021, 18h41
Obturatix

Bonsoir tag9724
Super ,du premier coup, merci
Bon week-end
:ave::ave::merci::ccool::applo:
Obturatix
25/07/2021, 10h33
Obturatix

Bonjour,
Dans les dates que j'avais mis dans le script, il y avait un décès le 14/07.J'ai eu des retours pour me dire que c'était super la manière d'amener une gerbe pour honorer la mémoire ....
Donc je remercie vraiment tous ceux qui ont participer à l'élaboration de ce script, bien sur en particulier NoSmoking, tag9724 et tous les autres.
merci
Bonnes vacances et protégez vous bien.
Obturatix
26/07/2021, 07h58
NoSmoking

:salut:
merci pour ce sympathique retour.