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:

Afficher une image (aléatoire) sur coordonnées souris
Coordonnées gps - Guide
Image iso - Guide
Quelle touche pour débloquer la souris ? - Guide
Comment agrandir une image - Guide
Acronis true image - Télécharger - Sauvegarde

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?

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?

programme qui n'affiche pas le mot secret

=Si la cellule A1 a du texte = B1 devient couleur

Sur la plage...

Discussions similaires

Newsletters