Forums Tout JavaScript

Bonjour à tous,

c'est une bouteille à la mer que je lance car malgré plusieurs solutions essayées et une demande d'aide exterieure, je n'arrive pas à avoir le résultat voulu... et pourtant, à la base le code a été écrit sur code pen et fonctionnait. et c'est un tout petit projet !

il s'agit pourtant de quelque chose de simple : une image dont l'opacité passe de 0 à 100 suivant une keyframs au survol et lorsque l'opacité est supérieure à 0.75 un lien est censé s'afficher!

voici le code html :

Code : Tout sélectionner

<head>
  <meta charset="utf-8"><meta name="viewport" content="width=device-width">
  <title>Happy Halloween</title>
  <LINk rel="stylesheet" href="fantome.css" > <script type="text/javascript" src="fantome.js"></script>
</head>

<body>

    <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= "texte_en_rouge">    
    ! Attention ! Plusieurs créatures rôdent...   
    </p><br>
  
    <img id="monstre2" src='lg.gif'/>           
    <!--premier monstre qui rode, le loup garou --> 
    <br><br><br><br><br>

    <img id="monstre1" src='hannibal.gif'/>     
    <!--deuxieme monstre qui rode, c'est Hannibal -->

<div class="conteneur">

    <img id= "fantome" src='pd2.jpg'/>          
    <!-- c'est le fantome qu'il faut trouver -->    
    <div id= "liencacher"> <a href= "cadenas.html">Par ici</a> 
    </div>
    <!-- le lien vers page suivante qui est hidden jusqu'à opacité à 75% de l'image fantome -->

</div>
<div class="conteneur2">
    <img id= "monstre3" src= 'witchlaught.gif'/>         
    <!--troisième monstre qui rode, la sorciere -->
</div>
   
</body>

le code CSS :

Code : Tout sélectionner

body { /* police de body */

(je vous epargne tout ce qui text e tmise en forme de flexbox.... )
  
  @keyframes apparition {                                                /*keyframes pour augmenter opacité quand on survole une image de 0 à 1 */
    from { opacity: 0.01; } 
    to { opacity: 1; } 
  }

#liencacher {                                                                   /*le lien pour page suivante est cachée au chargement de la page*/
  display : none; 
} 

  #monstre1, #monstre2, #monstre3, #fantome {                /*tous les monstres ne se voient pas au demarrage car opacité à 0*/
    height : 160px ;
    opacity : 0.9 ;
    text-align: start;
  }
  
  #fantome:hover, #monstre1:hover , #monstre2:hover , #monstre3:hover {         
  /*au survol des images de monstres dont fantome, l'opacité augmente*/ 
      animation-name : apparition;
      animation-duration : 10s ;
      animation-iteration-count: infinite;
  }  
  
  #fantome::selection {                                                         
  /*pour éviter la triche : si selection de ce que contient la page, le fantome ne peut pas être selectionné*/
      animation-name : invisible;
      animation-duration : 10s ;
      animation-iteration-count: infinite;
  }

et la fonction dont il est question, le code JS :

Code : Tout sélectionner

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

function cherche ( ghost=document.getElementById("fantome").opacity )

{

   if ( ghost=document.getElementById("fantome").opacity > 0.75 )     //condition : si opacité de l'image de fantome superieure à 75%
      {
      //link.style.display='block';//le lien n'est plus caché
      alert("se voit" );                                              //POUR TEST */
      } 
    
   else                                                               //Sinon supérieure le lien n'est plus caché */
      {
      //link.style.display='none';
      alert("se voit pas" );                                          //POUR TEST
      }

}

quand je fais les test seul l'alerte "se voit pas" s'affiche.

le code pen de la page faite au départ :
https://codepen.io/aelie54/pen/OJgqNLv

c'est un appel à l'aide je me prends la tête dessus depuis deux jours...

voici le dossier en libre telechargement pour les plus motivés :
https://wetransfer.com/downloads/88ecf7 ... 723/8e3678

MERCI *snif*

Bonjour,

La console du navigateur avec le zip indique
Cannot read properties of null (reading 'style')
Ce qui signifie que link n'existe pas

C'est normal.
La création de link (var link = document.getElementById("liencacher");) se fait dans le .js qui est appelé avant le code HTML
Donc à ce moment, il n'y a pas d'élément #liencacher dans la page

Dans un codepen je suppose que les chargements sont différés...

Il faut appeler le .js après la création du DOM (ou utiliser l'event onload)

bonjour, merci pour votre réponse.

helas j'ai déjà tenté avec onload pour la fonction cherche ça ne marche pas (et en enlevant aussi le timer)

qu'est-ce qu'un DOM (je suis débutante) je ne comprends pas "Il faut appeler le .js après la création du DOM".

est-ce que vous avez essayé de votre côté ? cela fonctionne-t-il ? Je suis désespérée.

Je n'ai pas testé en entier
D'ailleurs il y a des différences entre le codepen et le .zip

Appeler le .js a la fin de la page, signifie de déplacer la ligne
<script></script> avant </body>

Le DOM est l'ensemble des objets HTML

Je conseille aussi la lecture de ce tuto pour apprendre a utiliser la console
https://www.toutjavascript.com/savoir/n ... script.php

Forums Tout JavaScript

probleme fonction simple

probleme fonction simple

Re: probleme fonction simple

Re: probleme fonction simple

Re: probleme fonction simple