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