Sujet Précédent Sujet Suivant

Afficher une image (aléatoire) sur coordonnées souris

Fermé
antoinectrs Messages postés 1 Date d'inscription mercredi 6 février 2019 Statut Membre Dernière intervention 6 février 2019 - Modifié le 6 févr. 2019 à 17:48
 Suroz - 9 févr. 2019 à 18:32
Bonjour,

Je souhaite faire apparaitre des liens, gifs sur ma page. La souris est caché, les coordonnées de la souris sont déjà récupérer et afficher sur la page.
Le seul problème c'est l'affichage des mes images(en aléatoires), je n'arrive pas à les faire apparaitre sur les coordonnées de la souris.

Si quelqu'un a une solution, je suis preneur

Merci d'avance

Voici mon code 
  <!DOCTYPE html>
  <html>
  <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <title>header.html</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
   <link rel="stylesheet" href="./bootstrap-4.0.0/dist/css/bootstrap.min.css">
 
   <link rel="stylesheet" href="./css/cssportfoliocopie.css" />  
  </head>
  <body onmousemove="positionSouris(event);">
 <[/contents/242-introduction-au-dynamic-html-dhtml div] id="page" class="container">
                <div class="row">
   <div class="col-md-12">
    <div class="bigtitle">
     <a id="clickme" onclick="myFunction()">Grisou effect</a>
                        </div>
    <div id="divPosition"> </div> 
    </div>
    <div class="col-md-12">
     <div id=main >
      <img src="./images/slider/souche.gif">
      <img src="./images/slider/teaser.gif">
      <img src="./images/slider/wordwide.gif">
     </div>
    </div>
   </div>
  </div>
         </div>
 
 
  </div>
  <script type="text/javascript" src="./javascript/lib/jquery/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="./bootstrap-4.0.0/dist/js/popper.min.js"></script>
  <script type="text/javascript" src="./bootstrap-4.0.0/dist/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="./javascript/lib/flexslider/jquery.flexslider.js"></script>
  <script type="text/javascript" src="./javascript/scriptcopie.js"></script>  
 </body>
 </html>

le js: 
$(document).ready(function() {

  // Can also be used with $(document).ready()
    $('.flexslider').flexslider({
      animation: "slide",
      controlNav: "thumbnails"
    });
});
$(document).ready(function(){       
    var scroll_pos = 0;
    $(document).scroll(function() { 
        scroll_pos = $(this).scrollTop();
        if(scroll_pos > 1500) {
            
            $("li a").addClass("changeColortext");
        } 
        else {
           
            $("li a").removeClass("changeColortext");
        } 
    });
});
function scrollWin() {
  window.scrollTo(10, 0);
}

var x = 0;
function myFunction() {
  document.getElementById("demo").innerHTML = x += 1;
}
function positionSouris(event) { 
   var posX; 
   var posY; 
   posX = event.clientX; 
   posY = event.clientY; 
   document.getElementById('divPosition').innerHTML = 
            ' ' + posX + '  ' + posY;     
} 

window.addEventListener("scroll", function (e){
 
 window.scrollTo(0,0);
 
}, false);

function myFunction() {
var count = $("#main").children().length;
        var random = Math.floor(Math.random()*count+1);
        $('#main :nth-child(' + random + ')').css(
            'display', 'inline'
        );
}



EDIT : Ajout des balises de code.



Configuration: Macintosh / Chrome 71.0.3578.98
A voir également:

1 réponse

Réponse 1 / 1
Suroz
9 févr. 2019 à 18:32
Bonjour, vous ne récupérez nulle part les positions de la souris mais celle du scrollbar(barre de défilement).
Il vous faut aussi créer un élément qui contient l'image à afficher et le faire dans une boucle type 'animation' (via setInterval ou requestAnimationFrame) pour avoir une mise à jour de celle ci en permanence.
La mise à jour dans la boucle 'animée' va donc récupérer les positions x et y de la souris, déplacer le container de l'image en fonction de cette position et afficher l'image aléatoirement par rapport à une liste.
Je ne suis pas sûr que le terme aléatoire soit correct ici car si c'est censé être fonction de la position de la souris ce n'est pas aléatoire.
Toutefois pour obtenir une valeur(nombre) aléatoire vous pouvez utiliser la fonction "random".
En comparant le nombre obtenu à une liste des images possibles vous obtenez une valeur d'image aléatoire.
Est ce clair?
0

Discussions similaires

Afficher toutes les lignes masquées excel
livlarsen -
esicom -

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

1 réponse
Retrouver moi l'original
kornette87 -
rcdj79 -

3 réponses
image ?
youness -
Utilisateur anonyme -

11 réponses