Effet souris - JavaScript Orienté objet (POO) / Evènements, Javascript / Ajax / DHTML

CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

AccueilCodesTutorielsForumsEmploiLivresGuide achatConnexion

begin process at 2009 07 06 01:46:52

SILVERLIGHT 3 : COMMUNICATION ET MULTICAST par KooKiz

[PERSO] DéCOUVERTES ESTIVALES : LINUX (PART I) par FREMYCOMPANY

[REFACTORING] RESHARPER POUR VISUAL STUDIO 2010 (PREVIEW) par tja

[REFACTORING] ANALYSER VOS EXCEPTIONS AVEC RESHARPER EXCEPTIONAL par tja

SHAREPOINT 2007 : PATTERNS & PRACTICES SHAREPOINT GUIDANCE par phil

RE : BOUCLES ! par cedcyr

BOUCLES ! par cedcyr

CODE POUR EDITEUR DE TEXTE AVEC PRISE EN CHARGE DU COPIER/COLLER GARDANT LA MISE EN FORME par lolhangman

RE : COMMENT RéCUPéRER LES VARIABLES DE PLUSIEURS FORMULAIRES POUR OUVRIR FICHIER EXCEL par Bul3

+ de logiciels à télécharger

1 464 966 membres
20 nouveaux aujourd'hui
15 046 membres club

Trouver une ressource

Trouvez une ressource parmi 40 095 codes, 1 303 045 messages d'aide etc...

Recherche: dans [ Dernières recherches ]

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

Poser une question

Sujet : Effet souris [ JavaScript Orienté objet (POO) / Evènements ] (jfroger)

Informations & options pour cette discussion

Vous êtes ici : Thèmes / Javascript / DHTML / Ajax / JavaScript Orienté objet (POO) / Evènements / Effet souris
Ce sujet vous interesse ? Cliquez ici pour être averti quand il y a une nouvelle réponse

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)
	Rép. MP 197 msg 231 msg CS

jeudi 2 août 2007 à 08:46:42 | Re : Effet souris

PetoleTeam

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
	Rép. MP 3 msg

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>

</td></tr>

<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

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é 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 Trouver width dans le Head [ par francoisch ] bonjour Je cherche à faire juste ça: - trouver la largeur de la fenêtre: document.body, window.innnerWidth, ... - Link à une CSS dans le Head. Mon p comparer deux champs [ par williams59 ] Bonjour je dois comparer deux champs d'un formulaire avec la fonctions suivante : function Test(){ var1 = document.monform.fcity.value; changer le map [ par asmaa17 ] salut ,comment on peut changer le map d'un image et aussi l'evenement onmouseover de chaque area de ce map j'ai essayé ce code mais <img src="http://w défi en javascript [ par eucalion ] Bonjour à tous, Voici un défi de programmation, sans doute java script, pour qui voudra bien le tenter : Sur la page d'accueil de présent défi en javascript [ par eucalion ] Bonjour à tous, Voici un défi de programmation, sans doute java script, pour qui voudra bien le tenter : Sur la page d'accueil de présent problème création menu [ par titia80000 ] bonjour,pour un projet où le professeur nous demande de créer un générateur de page d'accueil, je souhaite que l'utilisateur puisse créer un menu avec