begin process at 2010 02 10 07:05:56
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript Orienté objet (POO)

 > 

Evènements

 > 

Effet souris

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Effet souris

mercredi 1 août 2007 à 21:28:33 | Effet souris

jfroger

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"><area shape="rect" coords="407,91,484,134"
href="#"onMouseOver="pop0('<img src=../image/dechets1.jpg>')" onMouseOut="disparaitre0()">
<area shape="circle" coords="206,280,43"
href="#"onMouseOver="pop0('<img src=../image/dechets2.jpg>')" onMouseOut="disparaitre0()">
<area shape="rect" coords="716,52,747,80"
href="#"onMouseOver="pop0('<img src=../image/dechets3.jpg>')" onMouseOut="disparaitre0()">
</map>


//<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 = "<table class='roll' cellpadding='10' cellspacing='0'><tr><td>"+contenu+"</td></tr></table>";
 }
 
 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
mercredi 1 août 2007 à 23:09:31 | Re : Effet souris

yousfane
Salut
if (parseInt(x) > 500)
jeudi 2 août 2007 à 08:46:42 | Re : Effet souris

PetoleTeam

Membre Club

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)
jeudi 2 août 2007 à 17:29:13 | Re : Effet souris

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

[:)]webjfr
jeudi 2 août 2007 à 20:43:48 | Re : Effet souris

jfroger

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 = "<table class='roll' cellpadding='10' cellspacing='0'><tr><td>"+contenu+"</td></tr></table>";
 }
 
 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>

<div id="bulle" style="position: absolute;"></div>

<table width="950" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr><td valign="middle">

   <table border="0" align="center" cellpadding="0" cellspacing="0">
   <tr>
   <td align="center" valign="top"><img src="../image/01_00_01.jpg" border="0" usemap="#imgcentre" href="#">
   </td></tr>
   </table>

</td></tr>

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

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

<area shape="circle" coords="212,92,43"
href="#"onMouseOver="pop0('<img src=img1.jpg><br>Réf : img 1')" onMouseOut="disparaitre0()">

<area shape="rect" coords="654,35,743,123"
href="#"onMouseOver="pop0('<img src=img2.jpg><br>Réf : img 2')" onMouseOut="disparaitre0()">

<area shape="rect" coords="680,367,788,461"
href="#"onMouseOver="pop0('<img src=img3.jpg><br>Réf : img 3')" onMouseOut="disparaitre0()">

<area shape="rect" coords="183,375,279,466"
href="#"onMouseOver="pop0('<img src=img4.jpg><br>Réf : img 4')" onMouseOut="disparaitre0()">
</map>

</body></html>

[:)]webjfr 

jeudi 2 août 2007 à 22:38:18 | Re : Effet souris

PetoleTeam

Membre Club


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)


Cette discussion est classée dans : document, souris, decal, pop0, disparaitre0

Répondre à ce message

Sujets en rapport avec ce message

Coordonnées +SCROLL [ par batmanu ] Bonjour,alors voilà, je cherche à récupérer les coordonnées de ma souris, oui mais...je voudrais aussi y ajouter la différence de scrolling de la fenê deplacer des div avec la souris [ par reski_01 ] bonjour a tous, j'ai chercher partout mais je ne trouve pas comment modifier ce que j'ai pu collecter je voudra Besoin d'aide sur une pop link ! [ par groseline ] bonjour à tous !!!  je suis en train de construire un site, et j'ai mis des infos-bulle sur des icones, ça marche impec, mon seul soucis, c'est que lo TextArea ou Select et position de la souris [ par 6BerYeti ] Bonjour,Je souhaite faire afficher une infobulle là où est le curseur (avec un offset) et à la déplacer qd la souris se déplace.J'ai à peu près tout c Probleme deplacer la souris [ par maxime5000 ] Bonjour j'ai suivice tuto pour deplacer la souris ou en veut et sa marche pas [url=http://www.javascriptfr.com/tutoriaux/POSITION-SOURIS-DANS-PAGE_47 Cet objet ne gere pas cette methode ou cette propriété [ par timalin ] Bonjour, le code ci-dessous est tiré d'un code complet mais comporte une erreur quand je le lance sous Ulimate 7 mais marche bizarement sous XP pro.Ca Script au passage de la souris [ par jeanmorelle ] Salut, Sur mon site, j'ai un div (un rectangle width 900px et height 50px) et j'aimerais qu'il se passe des actions lors du passage de la souris dess Validation javascript+confirmation avant submit [ par salasalasala ] AIDEz MOI C URGENT PLEASE[^^sad2] voici mon code je veut fair le submite si le client remplir tous les champs+case a coche,le reste ca maerche bien // Liste deroulantes [ par ouzb ] Bonjour a tous, Je viens solliciter votre aide. J'ai un problème avec mes listes déroulantes. Je m'explique, j'ai une formulaire de réservation avec u nombre de jour entre deux dates sans compter samedi et dimanche [ par meryazer ] Bonjour, je veux faire une fonction qui calcule le nombre de jours entre deux dates mais sans tenir en compte les samedis et les dimanches, j'ai pu ré


Nos sponsors


Sondage...

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,624 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)