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

[tag9724]

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 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
<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>

[Obturatix]

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

[Obturatix]

Bonjour à tous et à NoSmoking,
ah ah encore moi
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 :

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

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 :

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

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

[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 html :

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

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 :

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

1
2
3
oLien.target = "_blank"
// Ou encore
oLien.setAttribute( "target", "_blank")

[Obturatix]

Bonsoir tag9724
Super ,du premier coup, merci
Bon week-end

Obturatix

[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

[NoSmoking]

merci pour ce sympathique retour.