Posmouse - affichage des coordonnées de la souris, taille de la fenêtre et message

Télécharger le projet
Commenter

Description

1) Calcul des coordonnées de la souris
- au niveau de la fenêtre du navigateur
- au niveau de la page html complète

La fonction getPosMouse(event);
retourne dans le tableau associatif posMouse (déjà déclaré) les valeurs suivantes:

posMouse.xWindow position X de la souris dans la fenêtre
posMouse.yWindow position Y de la souris dans la fenêtre
posMouse.wWindow largeur de la fenêtre
posMouse.hWindow hauteur de la fenêtre
posMouse.xPage position X de la souris dans la page
posMouse.yPage position Y de la souris dans la page
posMouse.wPage largeur de la page
posMouse.hPage hauteur de la page
posMouse.message message que l'on pourrait ajouter à la div en phase de test


2) Affichage des coordonnées de la souris
- dans la barre de statut (pour IE)
- dans une div qui suit la souris à l'écran

en écrivant <body onmousemove="showPosMouse(event);">

Sous IE et Chrome, onmousemove dans le body ne retourne pas les coordonnées si la souris
est en dehors de la page (cas d'une page de faible hauteur ne dépassant une fenêtre).
Il est possible de mettre onmousemove dans la balise html.

Deux styles d'affichage sont proposés (position de la div par rapport à la souris):
- la div tourne autour de la souris en fonction de sa position sur l'écran
- la div reste en bas à droite de la souris mais ne sort pas de l'écran
  • Pour changer de style, appeler la fonction: swapViewPosMouse(true)

Le paramètre peut être true ou false.
S'il n'y a pas de paramètre, la fonction fonctionne en bascule.
Par défaut, le style est true.
  • Pour afficher les coordonnées, appeler la fonction: displayPosMouse(true)

Le paramètre false cachera l'affichage.
S'il n'y a pas de paramètre, la fonction fonctionne en bascule.
Par défaut, l'affichage est true.
  • Pour afficher les coordonnées dans la barre de statut de IE, displayStatBarPosMouse(false)

Le paramètre false cachera l'affichage.
S'il n'y a pas de paramètre, la fonction fonctionne en bascule.
Par défaut, l'affichage est false.
  • Pour afficher un message dans la div après les coordonnées de la souris: setMessagePosMouse(message);

(utile en phase de test pour éviter les alert() qui bloquent le déroulement)
Cette option permet de par exemple de faire afficher le résultat d'une variable, un attribut, ...
Exemple: setMessagePosMouse(var1 + var2); ou bien setMessagePosMouse(document.getElementById(idDiv).style.width);


Installation: <meta http-equiv="Content-Style-Type" content="text/css">
<script type="text/javascript" language="javascript" src="Styles/PosMouse.js"></script>

La div affichant les coordonnées n'a pas de style défini, sinon il ne pourrait être modifié.
pour changer le style de la div (couleur, fond, bordure, ...) il faut le déclarer en CSS.
Si la position "absolute" n'est pas précisée, la CSS prendra place en fin de document, sauf si la div
est déclarée dans la page à un endroit précis: <div id="divPosMouse"><br /></div>

<STYLE type="text/css">

#divPosMouse {
position:absolute;
margin:0;
padding:2px 10px 2px 10px;
border:#FF0000 1px solid;
color:white;
background:black;
text-align:left;
font-weight:bold;
font-size:12px;
}

</STYLE>

La fonction absolutePosMouse(true) permet de modifier la position (absolute ou static).
- true affiche en absolute, la div suit la souris,
- false affiche en static, la div est fixe.
S'il n'y a pas de paramètre, la fonction fonctionne en bascule.


Et si l'interface proposée ne convient, il toujours possible de ne récupérer que les coordonnées
de la souris et de les afficher dans sa propre div.
Placer sa div dans la page à l'endroit désiré avec le style de son choix: <div id="myDivPosMouse"><br /></div>
Ajouter la gestion de l'évènement dans le <body> ou le <html>: onmousemove="myPosMouse(event, 'myDivPosMouse');"
Puis créer sa propre fonction qui récupèrera et affichera les coordonnées de la souris:

<script language="javascript" type="text/javascript">
function myPosMouse(e, idElement){
var objDiv = document.getElementById(idElement);
getPosMouse(e);
objDiv.innerHTML = "Coordonnées de la souris<br />"
+ "Window: X = " + posMouse.xWindow + "   "
+ "Y = " + posMouse.yWindow + "   "
+ "Page: X = " + posMouse.xPage + "   " + "Y = " + posMouse.yPage;
}
</script>

Source / Exemple : 


// Déclaration des variables globales
// Tableau associatif qui contiendra les résultats des calculs
var posMouse = {'xWindow':0, 'yWindow':0, 'wWindow':0, 'hWindow':0, 'xPage':0, 'yPage':0, 'wPage':0, 'hPage':0, 'message':""};

var objDivPosMouse; 					// Objet div contenant les coordonnées

_optionViewPosMouse     = true; 		// Type d'affichage de la div des coordonnées
_displayPosMouse        = true; 		// Affichage ou non de la div des coordonnées
_displayStatBarPosMouse = false;		// Affichage des coordonnées dans la barre de statut (IE)

_statutBarCleared       = true			// Flag pour définir si le statut barre est déjà effacé

var ie = document.all ? true : false;	// Détection du navigateur IE

// Récupération des valeurs dans le tableau associatif posMouse
function getPosMouse(e)	{

	if (!e) { e = window.event; }
	
	// Coordonnées de la souris dans la fenêtre (window),
	// quelque soit la position de l'ascenseur 
	if (e.x != null && e.y != null) {
		posMouse.xWindow = e.x;
		posMouse.yWindow = e.y;
	}

	if (e.clientX != null && e.clientY != null) {
		posMouse.xWindow = e.clientX;
		posMouse.yWindow = e.clientY;
	}
	
	// Coordonnées de la souris dans la page,
	// avec calcul de la position de l'ascenseur 	
	if (e.pageX || e.pageY) {
		posMouse.xPage = e.pageX;
		posMouse.yPage = e.pageY;
	}
	 
	if (e.clientX || e.clientY) {
		posMouse.xPage = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
		posMouse.yPage = e.clientY + document.body.scrollTop  + document.documentElement.scrollTop;
	}
	
	// Taille de la fenêtre
	getClientSize();
	
	// Taille de la page
	posMouse.wPage   = document.body.offsetWidth;
	posMouse.hPage   = document.body.offsetHeight;
}

function getClientSize(){

	// Netscape ou Firefox
	if (typeof window.innerWidth == 'number') {
		posMouse.wWindow = window.innerWidth;
		posMouse.hWindow = window.innerHeight;
	} 
	// IE avec DTD valide
	else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
		posMouse.wWindow = document.documentElement.clientWidth;
		posMouse.hWindow = document.documentElement.clientHeight;
	}
	// IE avec DTD non valide
	else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
		posMouse.wWindow = document.body.clientWidth;
		posMouse.hWindow = document.body.clientHeight;
	}
	// Sinon
	else {
		posMouse.wWindow = -1;
		posMouse.hWindow = -1;
	}  
}
	
// Affichage à l'écran des coordonnées de la souris
function showPosMouse(e) {
	var xDiv = 0, yDiv = 0, wDiv = 0, hDiv = 0, message = "";
	
	// Création de la div qui contiendra les données	
	var objDiv = createDivPosMouse("divPosMouse");
	objDivPosMouse = objDiv;
	
	// Récupération des coordonnées de la souris
	getPosMouse(e);
	
	// Ecriture dans la barre de statut (IE)
	if (_displayStatBarPosMouse) {
		if (posMouse.message != "") {message = "     " + posMouse.message};
		window.defaultStatus = "Window: X = " + posMouse.xWindow
							+ "   Y = "    + posMouse.yWindow
							+ "   L = "    + posMouse.wWindow
							+ "   H = "    + posMouse.hWindow
							+ "     -     Page: X = " + posMouse.xPage
							+ "   Y = "    + posMouse.yPage
							+ "   L = "    + posMouse.wPage
							+ "   H = "    + posMouse.hPage
							+ message;
		_statutBarCleared = false;
	}
	else { 
		if (!_statutBarCleared) {
			window.defaultStatus = "";
			_statutBarCleared = true;
		}
	}
	
	// Différents tests pour vérifier si on affiche ou non les coordonnées
	if (_displayPosMouse) {
		objDiv.style.display = "block";
	}
	else {
		objDiv.style.display = "none";
		return;
	}
	
	// Ecriture dans une div qui suit la souris
	if (posMouse.message != "") {message = "<br />" + posMouse.message};	
	objDiv.innerHTML = "Window: X = " + posMouse.xWindow
					+ " Y = "      + posMouse.yWindow
					+ " L = "      + posMouse.wWindow
					+ " H = "      + posMouse.hWindow
					+ "<br />"
					+ "Page: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;X = " + posMouse.xPage
					+ " Y = "      + posMouse.yPage
					+ " L = "      + posMouse.wPage
					+ " H = "      + posMouse.hPage
					+ message;	

	// Largeur et hauteur de la div (pour éviter les dépassements d'écran)
	wDiv = parseInt(objDiv.offsetWidth, 10) + 2;
	hDiv = parseInt(objDiv.offsetHeight, 10);
	
	// Calcul des coordonnées X et Y de la div
	
	// Décalage de l'affichage par rapport à la souris
	var offsetX = 10, offsetY = 10 ;
	xDiv = posMouse.xPage + offsetX;	
	yDiv = posMouse.yPage + offsetY;
	
	if (_optionViewPosMouse) {
		// La div tourne autour de la souris en fonction de sa position sur l'écran
		if (posMouse.xWindow > (posMouse.wWindow / 2)) {
			xDiv = posMouse.xPage - wDiv - offsetX; 
		}
		if (posMouse.xWindow >= posMouse.wPage) {
			xDiv = posMouse.wpage - wDiv;
		}
		
		if (posMouse.yWindow > posMouse.hWindow / 2) {
			yDiv = posMouse.yPage - hDiv - offsetY;
			
		}		
		if (posMouse.yWindow >= posMouse.hWindow - 20) {
			yDiv = posMouse.hpage - hDiv - 0;
		}
	}
	else {
		// La div reste en bas à droite de la souris mais ne sort pas de l'écran
		var wMax = posMouse.wWindow - 20; // On supprime éventuellement le scrollbar vertical
		var hMax = posMouse.hWindow - 20; // On supprime éventuellement le scrollbar horizontal
		if (posMouse.xWindow + wDiv + offsetX > wMax) {
			xDiv = posMouse.xPage - (posMouse.xWindow + wDiv - wMax);
		}
		if (posMouse.yWindow + hDiv + offsetY > hMax) {
			yDiv -= (posMouse.yWindow + hDiv - hMax + offsetY);
		}	
	}
	
	if (xDiv < 0) { xDiv = 0 };
	if (yDiv < 0) { yDiv = 0 };
	
	// Positionnement de la div en X et Y
	objDiv.style.left = xDiv + "px";
	objDiv.style.top  = yDiv + "px";	
}

// Création de la div affichant les coordonnées de la sousis
function createDivPosMouse(idDiv) {
	if (document.getElementById(idDiv) == null) {
		var objDiv = document.createElement('div');
		objDiv.setAttribute('id', idDiv);		
		document.body.appendChild(objDiv);
		
		objDiv.style.display    = "none";
		objDiv.style.left       = "0px";
		objDiv.style.top        = "0px";
		
		// A définir en CSS par l'utilisateur
		//objDiv.style.position   = "absolute" ;
		//objDiv.style.margin     = "0";
		//objDiv.style.padding    = "2px 10px 2px 10px"; /* top right bottom left */		
		//objDiv.style.width      = "300px";
		//objDiv.style.background = "black";
		//objDiv.style.color      = "white";		
		//objDiv.style.border     = "#FF0000 1px solid";
		//objDiv.style.textAlign  = "left";
		//objDiv.style.fontSize   = "12px";
		//objDiv.style.fontWeight = "bold";
		//objDiv.style.zIndex     = "1000";
	}
	return document.getElementById(idDiv);
}

// Swap entre les 2 types d'affichage de la div des coordonnées si pas de paramètre ou forçage (true ou flase)
function swapViewPosMouse(_option) {
	_optionViewPosMouse = (typeof _option != 'undefined') ? _option : !_optionViewPosMouse;
}

// Swap entre l'affichage des coordonnées si pas de paramètre ou forçage (true ou flase)
function displayPosMouse(_option) {
	_displayPosMouse = (typeof _option != 'undefined') ? _option : !_displayPosMouse;
}

// Swap entre l'affichage des coordonnées dans la barre de statut si pas de paramètre ou forçage (true ou flase)
function displayStatBarPosMouse(_option) {
	_displayStatBarPosMouse = (typeof _option != 'undefined') ? _option : !_displayStatBarPosMouse;
}

// Swap entre la position abolute ou static de la div si pas de paramètre ou forçage (true ou flase)
function absolutePosMouse(_option) {
	if (typeof _option != 'undefined') {
		objDivPosMouse.style.position = _option ? "absolute" : "static";
	}	
	else
	{
		objDivPosMouse.style.position = (objDivPosMouse.style.position == "absolute" || objDivPosMouse.style.position == "") ? "static" : "absolute";
	}	
}

// Affichage d'un message dans la div après les coordonnées de la souris
// (utile en phase de test pour éviter les alert() qui bloquent le déroulement)
function setMessagePosMouse(message) { posMouse.message = message; }

Conclusion :


Simple à mettre en place, ce petit bout de code est une aide précieuse lors du développement.
Il permet d'obtenir non seulement la position de la soiris, mais également la taille de la fenêtre du navigateur, et permet d'afficher le résultat d'un calcul en cours de développement JS.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (phidelum)