Effet souris

jfroger Messages postés 3 Date d'inscription lundi 16 décembre 2002 Statut Membre Dernière intervention 2 août 2007 - 1 août 2007 à 21:28
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 - 2 août 2007 à 22:38
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

yousfane Messages postés 243 Date d'inscription vendredi 24 novembre 2006 Statut Membre Dernière intervention 21 décembre 2007 2
1 août 2007 à 23:09
Salut
if (parseInt(x) > 500)
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
2 août 2007 à 08:46
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)
jfroger Messages postés 3 Date d'inscription lundi 16 décembre 2002 Statut Membre Dernière intervention 2 août 2007
2 août 2007 à 17:29
Merci pour votre aide, vraiment super simpa les Dieux du JS

[:)]webjfr
jfroger Messages postés 3 Date d'inscription lundi 16 décembre 2002 Statut Membre Dernière intervention 2 août 2007
2 août 2007 à 20:43
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 

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

Posez votre question
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
2 août 2007 à 22:38
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)
Rejoignez-nous