Image a emplacement aléatoire [Résolu]

Réponse 1 / 9

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
28 nov. 2021 à 20:04

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/

.

Réponse 2 / 9

David987 Messages postés 121 Date d'inscription samedi 19 décembre 2015 Statut Membre Dernière intervention 16 octobre 2022 1
28 nov. 2021 à 20:07

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 ?

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
Modifié le 28 nov. 2021 à 20:09

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

Réponse 3 / 9

David987 Messages postés 121 Date d'inscription samedi 19 décembre 2015 Statut Membre Dernière intervention 16 octobre 2022 1
28 nov. 2021 à 20:10

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.

Réponse 4 / 9

David987 Messages postés 121 Date d'inscription samedi 19 décembre 2015 Statut Membre Dernière intervention 16 octobre 2022 1
Modifié le 28 nov. 2021 à 20:46

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)

David987 Messages postés 121 Date d'inscription samedi 19 décembre 2015 Statut Membre Dernière intervention 16 octobre 2022 1
Modifié le 28 nov. 2021 à 20:54

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

Réponse 5 / 9

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
28 nov. 2021 à 20:57

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

David987 Messages postés 121 Date d'inscription samedi 19 décembre 2015 Statut Membre Dernière intervention 16 octobre 2022 1
Modifié le 28 nov. 2021 à 21:18

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.

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650 > David987 Messages postés 121 Date d'inscription samedi 19 décembre 2015 Statut Membre Dernière intervention 16 octobre 2022
28 nov. 2021 à 21:16

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>

David987 Messages postés 121 Date d'inscription samedi 19 décembre 2015 Statut Membre Dernière intervention 16 octobre 2022 1 > David987 Messages postés 121 Date d'inscription samedi 19 décembre 2015 Statut Membre Dernière intervention 16 octobre 2022
Modifié le 28 nov. 2021 à 21:19

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 ?

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650 > David987 Messages postés 121 Date d'inscription samedi 19 décembre 2015 Statut Membre Dernière intervention 16 octobre 2022
28 nov. 2021 à 21:31

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>

David987 Messages postés 121 Date d'inscription samedi 19 décembre 2015 Statut Membre Dernière intervention 16 octobre 2022 1 > jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024
Modifié le 28 nov. 2021 à 21:37

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).

Réponse 6 / 9

David987 Messages postés 121 Date d'inscription samedi 19 décembre 2015 Statut Membre Dernière intervention 16 octobre 2022 1
Modifié le 28 nov. 2021 à 22:10

  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 ?

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
28 nov. 2021 à 22:14

De la même façon qu'on manipule la propriété display

Réponse 7 / 9

David987 Messages postés 121 Date d'inscription samedi 19 décembre 2015 Statut Membre Dernière intervention 16 octobre 2022 1
Modifié le 28 nov. 2021 à 22:35

<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 ?

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
28 nov. 2021 à 22:33

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.

David987 Messages postés 121 Date d'inscription samedi 19 décembre 2015 Statut Membre Dernière intervention 16 octobre 2022 1 > jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024
Modifié le 28 nov. 2021 à 22:36

ah mais oui quel naze.

Je rajoute ça et je tien au courant.

Réponse 8 / 9

David987 Messages postés 121 Date d'inscription samedi 19 décembre 2015 Statut Membre Dernière intervention 16 octobre 2022 1
Modifié le 28 nov. 2021 à 22:40

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

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
28 nov. 2021 à 22:42

À mon avis tu n'as pas bien regardé la propriété position

Réponse 9 / 9

David987 Messages postés 121 Date d'inscription samedi 19 décembre 2015 Statut Membre Dernière intervention 16 octobre 2022 1
28 nov. 2021 à 22:45

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

Image a emplacement aléatoire

9 réponses

Discussions similaires

Newsletters