Bonjour à tous,

Je m'amuse pour m'exercer à créer un site internet "jeu" pour halloween.

La page dont il est question est une page noir ou il faut chercher à la souris une image cachée (un fantôme d'opacité 0), et lorsque la souris passe dessus, l'opacité augmente (j'ai mis une keyfram pour gérer l'opacité et une autre pour empêcher la sélection pour les vilains tricheurs).

Et un lien est à côté de l'image, que j'ai caché en CSS également avec un display. Le but serait que le lien s'affiche lorsque l'image a une opacité supérieure ou égale à 0.75. J'ai donc cela en java : 

var ghost=document.getElementById("fantome");
var link = document.getElementById("liencacher");
var timer=setInterval("cherche()", 900);

function cherche (fantome ) {
  if (document.getElementById("fantome").opacity <= 0.75) 
  {
    link.style.display='none';
    //alert("oups" ); 
 } 
    else {
    link.style.display='block';
    //alert("SE VOIT pas" ); 
 }
 }

A noter que les consoles en log en commentaires fonctionnent pour le test suivant l'opacité d'origine de l'image que je mets dans le CSS. Mais la fenêtre reste ... mais ça prouve que la fonction marche mais pas ce qu'il y a dedans non?

Je suis donc à court d'idée, je ne comprends pas, ou alors peut être ais-je mal écrit l'action dans IF et Else ? (à noter que sur codepen tout ce code fonctionnait à voir ici : https://codepen.io/aelie54/pen/OJgqNLv ).

C'est mon 1er projet je suis encore novice (genre baby pas junior lol)... Alors svp, soyez indulgent.

Merci pour votre aide... Et bon dimanche.

PS : pour plus de détails, voici mon CSS (l'ID fantome est l'ID pour l'image du fantome, et l'ID liencacher est celui du lien qui s'affiche lorsque l'image est visible à au moins 75%) : 

  @keyframes apparition { from {opacity: 0.01;} to {opacity: 1;} }
  @keyframes invisible { from {visibility: visible;} to {visibility: hidden;} }

  #liencacher { display: none; }
  /*#liencacher {opacity : 1 }*/
  
  #fantome{
    height: 160px;
    opacity : 0;
    /*display: block;*/
    margin-left: 0px;
    margin-right: 0px;
  }
  
  #fantome:hover{
      animation-name : apparition;
      animation-duration : 10s ;
      animation-iteration-count: infinite;
  }
  
  #fantome::selection{
      animation-name : invisible;
      animation-duration : 10s ;
      animation-iteration-count: infinite;
  }

Et le body du css :

<p> <span class= "italique">Tu es perdu dans le noir. <br>
"Un fantôme est passé par ici, il repassera par là. Trouve le, et il te montrera LA voie ! </p> 

<br>

  <p class="attention">! Attention ! Plusieurs créatures rôdent...</p> 

  <br>

  <img id="monstre2" src='lg.gif'/>

    <br><br><br><br> <br>

    <img  id="monstre1" src='hannibal.gif'/> 

  <div class="conteneur">
    <img id="fantome" src='pd2.jpg'/>
    <div id="liencacher"> 
    <a href="cadenas.html">Par ici!</a><br>

    </div>
    <div class="conteneur2">

    <img id="monstre3" src='witchlaught.gif'/> </div>

-
Edité par AmeLyra 3 octobre 2021 à 14:17:02

Salut, tu n'es pas obligé d'utiliser le JS, le CSS peut suffir. Sinon si tu veux utiliser le JS, il faudra ajouter un addEventListner('mouseover', taFonction)

Afin que sur l'hover de l'élément, ta fonction s'exécute.

https://codepen.io/nadfri/pen/MWodKVQ?editors=1100

Merci NadfriJS pour ta réponse,

je suis pointilleuse mais je veux que le lien s'affiche qu'à partir d'une certaine opacité (il y a d'autres monstres cachés je vais faire en sorte que ça devienne un casse tête pour l'utilisateur :D)donc il devra rester au dessus de l'image pour trouver la sortie.

je vais donc me renseigner sur l'astuce que tu me proposes ;) 

-
Edité par AmeLyra 3 octobre 2021 à 15:26:23

Si ton code fonctionne sur codepen, il fonctionnera sur ton site.

Cela veut dire que le problème ne vient pas de ce que tu as fait sur codepen, mais probablement que tu n'as pas réussi à lier ton css et ton javascript depuis ta page html.

bonjour,

ils sont pourtant bel et bien liés, j'arrive à ouvrir mes docs CSS et JS dans visualstudio depuis le code html.

Merci en tout ca pour votre réponse.

SVP, un coup de main j'aimerais comprendre mon erreur...

-
Edité par AmeLyra 5 octobre 2021 à 15:51:53

bonjour,

j'ai resolu le probleme, voii le code : 

var ghost=document.getElementById("fantome");
var lien = document.getElementById("liencacher");
var timer=setInterval("cherche()", 800);

function cherche (fantome) {
/*console.log("VAR: ", ghost)*/
  if (window.getComputedStyle(ghost).opacity <= 0.75) 
  {
lien.style.display='none';
 } 
    else {
lien.style.display='block';
 }

}

-
Edité par AmeLyra 31 octobre 2021 à 8:54:13