Image a emplacement aléatoire

Résolu
David987 -  
Bonjour,

Ne connaissant pas grand chose au javascript, j'aimerais savoir si quelqu'un pourrais m'aiguiller sur une chose que j'aimerais mettre en place sur mon jeu en ligne.

Je m’explique, j'aimerais qu'une image apparaisse n'importe ou sur la page aléatoirement et que à chaque rechargement de la page il y ai une chance que l'image apparaisse à l'écran.

Je sais pas trop si je suis claire et dans le cas contraire, n'hésitez pas à me demander, j'essayerais de m'expliquer le plus précis possible.
J'ai pensé au javascript plus qu'au php.

Merci à vous pour votre aide.

9 réponses

Résumé de la discussion

La discussion porte sur l'affichage aléatoire d'une image sur une page web via JavaScript et sur la manière de faire apparaître cette image avec une probabilité à chaque chargement. Plusieurs échanges insistent sur le bon emplacement du script (éviter le head), l'usage d'un sélecteur DOM et d'une fonction de tirage aléatoire, ainsi que l'affichage conditionnel via le style display. Des échanges ultérieurs évoquent la position aléatoire en utilisant top et left et l'importance d'assigner une propriété de position sur l'élément cible, ainsi que le besoin d'appeler la fonction. D'autres points pratiques émergent ensuite, notamment qu'il faut définir une valeur de position (absolute/relative) pour que top et left agissent réellement et que l'exécution nécessite l'appel explicite d'une fonction.

Bobot (l’IA à votre service)
  2. David987 Auteur
    Merci pour ta réponse rapide Jordan45.

    Je vois bien comment faire, mais c'est en php là c'est bien ça ?
    Mais je ne vois pas comment faire apparaître l'image n'importe ou sur la page en css c'est possible ça ?
    0
  3. David987 Auteur
    Ah d'accord désolé j'ai pensé au phph avec rand(), if, else ...etc.

    Je regarde tes liens, je test un petit script et si je bloque, je reviens avec le code.

    Merci à toi.
    0
    1. David987 Auteur
      Alors voila ce que je peux en ressortir pour le moment : 

      <script>
//fonction du random
function selec_rand(max) {
  return Math.floor(Math.random() * max);
}
var random = selec_rand(10);
if (random === 5) {
    //masquage de l'image
 document.getElementById(image_event).style.display = block;
  } else {
    //Affichage de l'image
 document.getElementById(image_event).style.display = none;
  }
document.write(resultat); //m'affiche rien même si random est égale à 5
document.write(random); // m'affiche rien
</script>

      <div id="image_event"><a href="urldelapage"><img src="lien image" alt="image d'évent" title="Cliquez sur moi"></a></div>


      Le problème que j'ai maintenant, c'est que l'image apparaît à chaque fois alors que le rand n'est pas toujours égale à 5 puisqu'il peut être de 1 à 10.

      Une idée ? (je cherche toujours en attendant bien entendu)
      0
      1. David987 Auteur
        J'ai essayé comme ça : 

        <html>
 <head>
  <script>
  //fonction du random
  function selec_rand(max) {
    return Math.floor(Math.random() * max);
  }
  var image_event = '<a href="urldelapage"><img src="lien image" alt="image d\'évent" title="Cliquez sur moi"></a>'
  var random = selec_rand(5);
  if (random === 5) {
   //masquage de l'image
   document.getElementById(image_event).style.display = block;
    } else {
   //Affichage de l'image
   document.getElementById(image_event).style.display = none;
    }
  document.write(resultat); //m'affiche rien même si random est égale à 5
  document.write(random); // m'affiche rien
  </script>
 </head>
 <body>

  <div id="image_event"></div>
 </body>
</html>

        Mais la console de firefox me dis qu'il y à un problème : 
        Uncaught TypeError: document.getElementById(...) is null
        0
    3. jordane45 Modérateur
      Avec des quotes autour des propriétés... ça marche mieux...

      Voici le code amélioré et corrigé 
          document.addEventListener("DOMContentLoaded", function(){
      // on s'assure que la page a terminée de se charger...
      displayImg();
      
    });

    //fonction du random
    function selec_rand(max) {
      return Math.floor(Math.random() * max);
    }

    function displayImg(){
      var IMG = document.getElementById('image_event');
      var random = selec_rand(10);
      console.log('random',random); // affichage dans la console du navigateur
      if (random >= 5) {
          //masquage de l'image
          IMG.style.display = 'block';
      } else {
          //Affichage de l'image
          IMG.style.display = 'none';
      }
        
    }

      0
      1. David987 Auteur
        Merci beaucoup, par contre, le lien de mon image, si j'ai bien compris, dois être mis ici 

        var IMG = document.getElementById('image_event');

        Mais si je veux qu'elle soit cliquable je fais comment ?

        EDIT : En faite c'est moi qui à lu un peu trop vite ta correction mise à jour du code en dessous.
        0
      2. jordane45 Modérateur
        @David987Non. tu n'as rien à changer dans le script
        Je me suis basé sur ton premier html 
        <div id="image_event"><a href="urldelapage"><img src="lien image" alt="image d'évent" title="Cliquez sur moi"></a></div>
        0
      3. David987 Auteur
        @David987oups, j'ai rien dis
        voici mon code(avec ta correction) : 

        <html>
 <head>
  <script>
   document.addEventListener("DOMContentLoaded", function(){
    // on s'assure que la page a terminée de se charger...
    displayImg();
   });

   //fonction du random
   function selec_rand(max) {
    return Math.floor(Math.random() * max);
   }

   function displayImg(){
    var IMG = document.getElementById('image_event');
    var random = selec_rand(10);
    console.log('random',random); // affichage dans la console du navigateur
    if (random === 5) {
    //masquage de l'image
    IMG.style.display = 'block';
    } else {
    //Affichage de l'image
    IMG.style.display = 'none';
    }
   }
  </script>

 </head>
 <body>
  <div id="image_event"><a href="lienurl"><img src="lien image" alt="image event" title="image event"></a></div>
 </body>
</html>


        est-ce normal que firefox me mette un erreur de variable IMG = NULL si le rand n'est pas à 5 ?
        0
      4. jordane45 Modérateur
        @David987non...
        mais j'ai beau testé dans tous les sens sur firefox je ne parvient pas à reproduire ton bug..

        Tu as bien placé ton code JS à la fin de ta page ( avant le </body> ) et non dans le head (comme ça se faisait il y a 20 ans ..) ??

        Comme ceci 
        <body>
    <div id="image_event"><a href="urldelapage"><img src="lien image" alt="image d'évent" title="Cliquez sur moi"></a></div>
    <script>
    
    document.addEventListener("DOMContentLoaded", function(){
      // on s'assure que la page a terminée de se charger...
      displayImg();
      
    });

    //fonction du random
    function selec_rand(max) {
      return Math.floor(Math.random() * max);
    }

    function displayImg(){
      var IMG = document.getElementById('image_event');
      var random = selec_rand(10);
      console.log('random',random); // affichage dans la console du navigateur
      if (random === 5) {
          //masquage de l'image
          IMG.style.display = 'block';
      } else {
          //Affichage de l'image
          IMG.style.display = 'none';
      }
        
    }
    </script>
  </body>
        0
      5. David987 Auteur
        @jordane45Ah oups voila mon erreur ^^
        j'ai mis le script dans la balise head.

        Merci pour la correction.
        As-tu une indication pour le positionnement aléatoire de l'image sur la page ? (je ne vois pas en css comment faire ça).
        0
    4. David987 Auteur 
        function rand_style(min, max) {
   return Math.random() * (max - min) + min;
  }
  
  function position_top(){
   var TOP = rand_style(10, 90);
   var LEFT = rand_style(10, 90);
   var e = document.getElementById('image_event');
    e.style.top = TOP;
    e.style.left = LEFT;
    console.log('top',TOP); // affichage dans la console du navigateur 
    console.log('left',LEFT); // affichage dans la console du navigateur 
  }


      J'ai fais ça pour le moment, donc ma fonction est bien appelée puisque c'est le même nom que pour l'affichage aléatoire.
      Sauf que dans la console, il me met toujours rien.

      Tu as une idée ?
      0
      1. jordane45 Modérateur
        De la même façon qu'on manipule la propriété display
        0
    5. David987 Auteur 
      <html>
 <head>
 </head>
 <body>
  <div id="image_event"><a href="lienpage.php"><img src="lien image" alt="image event" title="image event"></a></div>
 <script>
  document.addEventListener("DOMContentLoaded", function(){
   // on s'assure que la page a terminée de se charger...
   displayImg();
  });

  //fonction du random
  function selec_rand(max) {
   return Math.floor(Math.random() * max);
  }
  
  function rand_style(min, max) {
   return Math.random() * (max - min) + min;
  }
  
  function displayImg(){
   var IMG = document.getElementById('image_event');
   var random = selec_rand(10);
   var TOP = rand_style(10, 90);
   var LEFT = rand_style(10, 90);
   var RIGHT = rand_style(10, 90);
   var BOTTOM = rand_style(10, 90);
   console.log('random',random); // affichage dans la console du navigateur
   console.log('top',TOP); // affichage dans la console du navigateur 
   console.log('left',LEFT); // affichage dans la console du navigateur
   console.log('right',RIGHT); // affichage dans la console du navigateur	
   console.log('bottom',BOTTOM); // affichage dans la console du navigateur
   if (random === 5) {
    //Affichage de l'image
    IMG.style.display = 'block';
    IMG.style.top = TOP;
    IMG.style.left = LEFT;
    IMG.style.right = RIGHT;
    IMG.style.bottom = BOTTOM;
    IMG.style.position = 'relative';
    IMG.style.zIndex = '1';
   } else {
   //Masquage de l'image
   IMG.style.display = 'none';
   }
  } 
 </script>
 </body>
</html>


      J'ai fais ça pour le moment, donc tous ce que je veux qui s'affiche dans la console s'affiche correctement, sauf que l'image ne se positionne pas forcément là ou elle doit etre.

      Tu as une idée ?
      0
      1. jordane45 Modérateur
        Relis bien le lien que je t'ai donné.
        Tu verras qu'on ne donne pas uniquement un chiffre mais également une unité par exemple des pixel.
        0
      2. David987 Auteur
        @jordane45ah mais oui quel naze.

        Je rajoute ça et je tien au courant.
        0
    6. David987 Auteur
      Effectivement ça marche mieux 

      document.addEventListener("DOMContentLoaded", function(){
   // on s'assure que la page a terminée de se charger...
   displayImg();
  });

  //fonction du random
  function selec_rand(max) {
   return Math.floor(Math.random() * max);
  }
  
  function rand_style(min, max) {
   return Math.random() * (max - min) + min;
  }
  
  function displayImg(){
   var IMG = document.getElementById('image_event');
   var random = selec_rand(10);
   var TOP = rand_style(10, 90);
   var LEFT = rand_style(10, 90);
   var RIGHT = rand_style(10, 90);
   var BOTTOM = rand_style(10, 90);
   console.log('random',random); // affichage dans la console du navigateur
   console.log('top',TOP); // affichage dans la console du navigateur 
   console.log('left',LEFT); // affichage dans la console du navigateur
   console.log('right',RIGHT); // affichage dans la console du navigateur 
   console.log('bottom',BOTTOM); // affichage dans la console du navigateur
   if (random >= 0) {
    //Affichage de l'image
    IMG.style.display = 'block';
    IMG.style.top = TOP+'%';
    IMG.style.left = LEFT+'%';
    IMG.style.right = RIGHT+'%';
    IMG.style.bottom = BOTTOM+'%';
    IMG.style.position = 'relative';
    IMG.style.zIndex = '1';
   } else {
   //Masquage de l'image
   IMG.style.display = 'none';
   }
  }


      Par contre, l'image s'affiche en haut de la page aléatoirement mais toujours en haut.

      C'est normal sachant que les valeurs sont toujours différentes ?

      EDIT : Sur chrome ça marche nickel mais sur firefox elle reste aléatoire qu'en haut de la page
      0
      1. jordane45 Modérateur
        À mon avis tu n'as pas bien regardé la propriété position
        0
    7. David987 Auteur
      Ah mince, j'avais voulu testé avec relative mais j'ai pas remis absolute.

      Tous fonctionne nickel, merci à toi pour ton aide.
      Je met mon code ici (code javascript seulement) si quelqu'un à le même besoin que moi. 

      document.addEventListener("DOMContentLoaded", function(){
			// on s'assure que la page a terminée de se charger...
			displayImg();
		});

		//fonction du random
		function selec_rand(max) {
			return Math.floor(Math.random() * max);
		}
		
		function rand_style(min, max) {
			return Math.random() * (max - min) + min;
		}
		
		function displayImg(){
			var IMG = document.getElementById('image_event');
			var random = selec_rand(10);
			var TOP = rand_style(10, 80);
			var LEFT = rand_style(10, 80);
			var RIGHT = rand_style(10, 80);
			var BOTTOM = rand_style(10, 80);
			console.log('random',random); // affichage dans la console du navigateur
			console.log('top',TOP); // affichage dans la console du navigateur	
			console.log('left',LEFT); // affichage dans la console du navigateur
			console.log('right',RIGHT); // affichage dans la console du navigateur	
			console.log('bottom',BOTTOM); // affichage dans la console du navigateur
			if (random >= 0) {
				//Affichage de l'image
				IMG.style.display = 'block';
				IMG.style.top = TOP+'%';
				IMG.style.left = LEFT+'%';
				IMG.style.right = RIGHT+'%';
				IMG.style.bottom = BOTTOM+'%';
				IMG.style.position = 'absolute';
				IMG.style.zIndex = '1';
			} else {
			//Masquage de l'image
			IMG.style.display = 'none';
			}
		}
      0

      Discussions similaires

      Retrouver l'image originale d'une photo modifiée
      Raven

      10 réponses
      Comment recadrer une image avec Inkscape
      infofeet

      13 réponses