Image a emplacement aléatoire

Résolu
David987 Messages postés 120 Date d'inscription   Statut Membre Dernière intervention   -  
David987 Messages postés 120 Date d'inscription   Statut Membre Dernière intervention   -
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.
A voir également:

9 réponses

Réponse 1 / 9
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour,

Un peu de random
un if/esle
un peu de css avec la proprieté display

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/random
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/if...else
https://www.journaldunet.fr/web-tech/developpement/1202637-comment-afficher-masquer-une-div-en-javascript/

.
0
Réponse 2 / 9
David987 Messages postés 120 Date d'inscription   Statut Membre Dernière intervention   1
 
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
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
non là c'est en javascript... vu que tu as posé ta question dans le forum javascript ...

En php
https://www.php.net/manual/fr/function.rand.php
https://www.php.net/manual/fr/control-structures.elseif.php
https://www.php.net/manual/fr/function.echo.php

Pour la position en css
https://developer.mozilla.org/fr/docs/Learn/CSS/CSS_layout/Positioning
0
Réponse 3 / 9
David987 Messages postés 120 Date d'inscription   Statut Membre Dernière intervention   1
 
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
Réponse 4 / 9
David987 Messages postés 120 Date d'inscription   Statut Membre Dernière intervention   1
 
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
David987 Messages postés 120 Date d'inscription   Statut Membre Dernière intervention   1
 
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

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 9
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
David987 Messages postés 120 Date d'inscription   Statut Membre Dernière intervention   1
 
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
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > David987 Messages postés 120 Date d'inscription   Statut Membre Dernière intervention  
 
Non. 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
David987 Messages postés 120 Date d'inscription   Statut Membre Dernière intervention   1 > David987 Messages postés 120 Date d'inscription   Statut Membre Dernière intervention  
 
oups, 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
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > David987 Messages postés 120 Date d'inscription   Statut Membre Dernière intervention  
 
non...
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
David987 Messages postés 120 Date d'inscription   Statut Membre Dernière intervention   1 > jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention  
 
Ah 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
Réponse 6 / 9
David987 Messages postés 120 Date d'inscription   Statut Membre Dernière intervention   1
  
  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
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
De la même façon qu'on manipule la propriété display
0
Réponse 7 / 9
David987 Messages postés 120 Date d'inscription   Statut Membre Dernière intervention   1
  
<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
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
David987 Messages postés 120 Date d'inscription   Statut Membre Dernière intervention   1 > jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention  
 
ah mais oui quel naze.

Je rajoute ça et je tien au courant.
0
Réponse 8 / 9
David987 Messages postés 120 Date d'inscription   Statut Membre Dernière intervention   1
 
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
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
À mon avis tu n'as pas bien regardé la propriété position
0
Réponse 9 / 9
David987 Messages postés 120 Date d'inscription   Statut Membre Dernière intervention   1
 
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

PIX
plart -
jordane45 -

1 réponse
Retrouver l'image originale après avoir fait des modifications ?
Raven -
Asta972155 -

10 réponses
Comment recadrer une image avec Inkscape
infofeet -
TELLIEZ -

13 réponses
Dechiffrer une image caché
JACQUE -
Otomec -

1 réponse