Effet souris

Signaler
Messages postés
3
Date d'inscription
lundi 16 décembre 2002
Statut
Membre
Dernière intervention
2 août 2007
-
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
-
Bonjour a tous,
Voilà deux jours que je bloque sur une fonction .
Je souhaite afficher une image a gauche ou a droite de la souris en fonction de l'emplacement de la souris dans l'écran sur un lien MAP
// Page HTMP
<map name="imgcentre" id="imgcentre">

//<script>
// x position de la souris dans l'écran
 if (x > 500) { // Condition qui ne marche pas 
 // le reste fonctionne
 decal_x = 25;
 decal_y = -15;
 } else {
 decal_x = -25;
 decal_y = 15;
 }
 
 
 function pop0(contenu) {
 document.getElementById("bulle").innerHTML = ""+contenu+"
";
 }
 
 function suivre_souris0(e) {
 if (navigator.appName=="Microsoft Internet Explorer") { var x event.x + document.body.scrollLeft; var y event.y + document.body.scrollTop;
 } else {
 var x =  e.pageX;var y =  e.pageY;
 } document.getElementById("bulle").style.left x + decal_x; document.getElementById("bulle").style.top  y + decal_y;
 }
 function disparaitre0() {
 document.getElementById("bulle").innerHTML = '';
 }

Help my SVP

[:)]webjfr

5 réponses

Messages postés
243
Date d'inscription
vendredi 24 novembre 2006
Statut
Membre
Dernière intervention
21 décembre 2007
2
Salut
if (parseInt(x) > 500)
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
B
onjour...
Le script est pris en compte comme il est rencontré à l'ouverture de la page, de ce fait les variables decal_x et decal_y sont initialisées au départ et comme x, à ce moment n'est pas défini c'est la condition else qui est appliquée.

DONC
mets ton test dans la fonction suivre_souris0()
//------------------------
function suivre_souris0(e){
  if (navigator.appName=="Microsoft Internet Explorer") {
    var x = event.x + document.body.scrollLeft;
    var y = event.y + document.body.scrollTop;
  }
  else {
    var x =  e.pageX;
    var y =  e.pageY;
  }
  if (x > 500) {
    decal_x = 25;
    decal_y = -15;
  }
  else {
    decal_x = -25;
    decal_y = 15;
  }






  puis la suite...


 }





N'oublis pas de mettre l'unité aux positions
document.getElementById("bulle").style.left = x + decal_x +"px";






;0)
Messages postés
3
Date d'inscription
lundi 16 décembre 2002
Statut
Membre
Dernière intervention
2 août 2007

Merci pour votre aide, vraiment super simpa les Dieux du JS

[:)]webjfr
Messages postés
3
Date d'inscription
lundi 16 décembre 2002
Statut
Membre
Dernière intervention
2 août 2007

Voici la version finale qui fonctionne, pour l'emplacement des images en fonction du rollover dans l'emplacement de l'écran

Page JavaScript nommé : rollover.js

// Position rollover sur écran
 
 document.onmousemove = suivre_souris0;
 var contenu
 
 function pop0(contenu) {
 document.getElementById("bulle").innerHTML = ""+contenu+"
";
 }
 
 function suivre_souris0(e) {
  
  if (navigator.appName=="Microsoft Internet Explorer") {
  var x = event.x + document.body.scrollLeft; 
  var y = event.y + document.body.scrollTop;
 
  } else {
  var x =  e.pageX;
  var y =  e.pageY;
  }
 
  if ( x < 600 ) {
   
   if ( y < 350 ) {  // Position en haut a gauche
   decal_x = 10;
   decal_y = 5;
   document.getElementById("bulle").style.left = x + decal_x;
   document.getElementById("bulle").style.top  = y + decal_y;
   
   } else {   // Position en bas a gauche
   decal_x = 5;
   decal_y = -350;
   document.getElementById("bulle").style.left = x + decal_x;
   document.getElementById("bulle").style.top  = y + decal_y;
   }   
  }
  
  if ( x > 600 ) {
   
   if ( y < 350 ) {  // Position en haut a droite
   decal_x = -420;
   decal_y = 20;
   document.getElementById("bulle").style.left = x + decal_x;
   document.getElementById("bulle").style.top  = y + decal_y;
   
   } else {   // Position en bas a gauche
   decal_x = -450;
   decal_y = -350;
   document.getElementById("bulle").style.left = x + decal_x;
   document.getElementById("bulle").style.top  = y + decal_y;
   }   
  }  
 }
 
 function disparaitre0() {
 document.getElementById("bulle").innerHTML = '';
 }

Page HTML

<html>
<head>
<title>Page HTML</title>
<meta http-equiv ="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript1.2" src="rollover.js"></script>
</head>




  ----
   <table border="0" align="center" cellpadding="0" cellspacing="0">
   ----

   ,
   </td>
   


</td></tr>


<tr><td height="40"><?php include("../../commun/bottom.php"); ?>
</td></tr>
</table>

<map name="imgcentre" id="imgcentre">



</html>

[:)]webjfr 
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
Merci du retour

Prend quand même l'habitude de simplifier, si cela reste clair, et de mettre les unitées aux positions







function suivre_souris0(e) {
  if (navigator.appName= ="Microsoft Internet Explorer") {
    var x = event.x + document.body.scrollLeft;
    var y = event.y + document.body.scrollTop;
  }
  else {
    var x =  e.pageX;
    var y =  e.pageY;
  }
  if ( x < 600 ) {
    if ( y < 350 ) {  // Position en haut a gauche
      decal_x = 10;
      decal_y = 5;
    }
    else {   // Position en bas a gauche
      decal_x = 5;
      decal_y = -350;
    }
  }
  if ( x > 600 ) {
    if ( y < 350 ) {  // Position en haut a droite
      decal_x = -420;
      decal_y = 20;
    }
    else {   // Position en bas a gauche
      decal_x = -450;
      decal_y = -350;
    }
  }
  //-- Memes instructions pour tous les cas
  document.getElementById("bulle").style.left = x + decal_x +"px";
  document.getElementById("bulle").style.top  = y + decal_y +"px";
}






;0)