Faire disparaître une image

Bioubiou - 7 nov. 2015 à 14:45 - Dernière réponse : @karamel 1659 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 22 juin 2018 Dernière intervention
- 10 nov. 2015 à 19:18
Bonjour,
je dois coder un jeu en html, css et js, mon problème est que, sur la page de commencement, un personnage explique dans une bulle ce que le joueur dois faire. J'aimerais que cette bulle disparaisse au bout de 5 ou 6 secondes mais je n'y arrive pas...
La bulle est une image part que j'ai mis dans une div :

HTML :
<div id="mabulle">
   <img id="bulle1" src="bulle.png" style="position:absolute; left:100px; width:1000px; height:500px; z-index:6"></a>
   </div>  


Quelqu'un a -t-il une solution?

Merci


EDIT : Ajout des balises de code.
Afficher la suite 

Votre réponse

9 réponses

@karamel 1659 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 22 juin 2018 Dernière intervention - 7 nov. 2015 à 16:52
0
Merci
bonjour

il faut utiliser setTimeout

 setTimeout(function(){document.getElementById("mabulle").style.display="none"},6000)

Merci pour votre réponse,
le setTimeout je le met à la suite dans la div?
@karamel 1659 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 22 juin 2018 Dernière intervention - 7 nov. 2015 à 18:37
tout depend a quelle moment est affiché la bulle
Bioubiou > @karamel 1659 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 22 juin 2018 Dernière intervention - 8 nov. 2015 à 00:42
La bulle est affichée au début
@karamel 1659 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 22 juin 2018 Dernière intervention - 8 nov. 2015 à 12:27
il faut donc utiliser un onload

<script>
addEventListener('load',function(){setTimeout(function(){document.getElementById("mabulle").style.display="none"},6000)},false);
</script>
ça marche !!! :) merci beaucoup.
Et par hasard vous ne sauriez pas comment faire un compte à rebours?
Commenter la réponse de @karamel
@karamel 1659 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 22 juin 2018 Dernière intervention - Modifié par kazma le 9/11/2015 à 21:53
0
Merci
j'ai ceci

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script>

function rebour_multiple(tempsFin, idRebour){

 this.tempsFin=tempsFin;
 this.idRebour=document.getElementById(idRebour);
 this.rebour();
 }


rebour_multiple.prototype.rebour=function(){

  var that=this;
  var date1 = new Date().getTime();
  var date2 = new Date(this.tempsFin).getTime();

  if(date1>date2){
  this.idRebour.firstChild.nodeValue ='Temps restant : date passé'
  }

  else{
  var sec = (date2 - date1) / 1000;
  var n = 24 * 3600;

  var j = Math.floor (sec / n);
  var h = Math.floor ((sec - (j * n)) / 3600);
  var mn = Math.floor ((sec - ((j * n + h * 3600))) / 60);
  var sec = Math.floor (sec - ((j * n + h * 3600 + mn * 60)));

  j= j < 10 ? '0' + j : j;
  h= h < 10 ? '0' + h : h;
  mn= mn < 10 ? '0' + mn : mn;
  sec= sec < 10 ? '0' + sec : sec;

  this.idRebour.firstChild.nodeValue = "Temps restant : " + j +"J  "+ h +"H  "+ mn +"Min  "+ sec + "Sec ";
  }

  setTimeout(function(){that.rebour()}, 1000); 

 }

function initcompteur(){

 new rebour_multiple('09/10/2015 22:47:00',"compteur1");

 new rebour_multiple('02/18/2016 12:55:20', "compteur2");

 new rebour_multiple('04/19/2017 23:00:00', "compteur3");

}

typeof window.addEventListener == 'undefined' ? window.attachEvent('onload', initcompteur) : window.addEventListener('load', initcompteur, false);

</script>

 </head><body>
 
  <span id="compteur1">00:00:00</span>;
  <br>
  <span id="compteur2">00:00:00</span>;
  <br>
  <span id="compteur3">00:00:00</span>;
      
 </body></html>


rien ne sert de courir il faut partir a point.
cours Forest cours !
Coool je l'ai modifié un peu et il marche! Merci beaucoup! :)

Et par hasard... ahah j'ai un autre souci : Le but du joueur est de trouver la bonne touche du clavier pour faire rentrer une balle dans un trou, avant la fin du compte à rebours. Lorsque le joueur trouve la bonne touche avant la fin du compte à rebours, comment interrompre celui ci et inviter le joueur au niveau suivant? Dans mon js j'ai cela :

switch ( lettre )
{
case 'j': TweenMax.to( $balle1, 1, { left:'1200px', top:'590px', rotation:'3rad' }); break;
case 'a' : TweenMax.to( $balle1, 1, { opacity : '0'}); break;
case 'p': TweenMax.to( $balle1, 1, { left:'-100px', top:'500px' }); break;

}

La bonne touche est le J (les autres sont des pièges...). Du coup il faut que j'indique que lorsque le J est enclenché, le compte à rebours s'arrête et un lien vers le niveau suivant apparaît. Ou alors, j'indique que lorsque ma "balle1" touche la sortie (appelée dans mon code "trou1") le compte à rebours s'arrête etc.

Il y a t-il un moyen de faire ça ?
Commenter la réponse de @karamel
@karamel 1659 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 22 juin 2018 Dernière intervention - 10 nov. 2015 à 19:18
0
Merci
je te laisse l'adaptation

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>

function rebour_multiple(tempsFin, idRebour){

 this.tempsFin=new Date().getTime()+tempsFin*1000;
 this.idRebour=document.getElementById(idRebour);
 this.timer="";
 this.rebour();
 }


rebour_multiple.prototype.rebour=function(){

  var that=this;
  var date1 = new Date().getTime();
  var date2 = this.tempsFin;

  if(date1>date2){
  this.idRebour.firstChild.nodeValue ='perdu'
  }

  else{
  var sec = (date2 - date1) / 1000;

  var mn = Math.floor (sec / 60);
  var sec = Math.floor (sec % 60);

  mn= mn < 10 ? '0' + mn : mn;
  sec= sec < 10 ? '0' + sec : sec;

  this.idRebour.firstChild.nodeValue =  mn +"Min  "+ sec + "Sec ";
  }

  this.timer=setTimeout(function(){that.rebour()}, 1000); 

 }


function touche(e){

  if(e.keyCode==74){
    
  clearTimeout(el_obj.timer)
  
   alert("gagne")
   
   document.getElementById('lien').style.display="block"
  
  }
}

var el_obj=""
 
function initcompteur(){

el_obj=new rebour_multiple(120,"compteur1");

}

typeof window.addEventListener == 'undefined' ? window.attachEvent('onload', initcompteur) : window.addEventListener('load', initcompteur, false);

typeof window.addEventListener == 'undefined' ? window.attachEvent('onkeydown', touche) : window.addEventListener('keydown', touche, false);

</script>

 </head><body>
 
  <span id="compteur1">00:00:00</span>;
  
   <a href="http://www.developpez.com/" id="lien" style="display:none">suivant</span>;
      
 </body></html>

Commenter la réponse de @karamel

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.