begin process at 2012 05 29 05:29:38
  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

redimensionner une miniature sur un onmouseover [ par xzonz ] bonsoir tout le monde [^^clinoeil1] quand on passe la souris sur les liens ca affiche l'image qui apparait en taille réelle j'aimerais juste qu'elle 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 redimensionner une image [ par xzonz ] bonjour a toutes et tous [^^clinoeil1] voila ma question: j'ai une page toute simple (pour le moment) sur laquelle il y a des liens pointant vers de 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 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 //


Nos sponsors


Sondage...

Comparez les prix


Archos Tablette PC ARNOVA ARNOVA 10 4GB
Entre 200€ et 210€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
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,562 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)