11540 sujets

JavaScript, DOM et API Web HTML5

Limiter une fonction event à une zone précise

Bonsoir à tous,

J'ai un petit souci qui doit être très simple à régler, mais étant novice en Javascript je m'en sors pas... Smiley confused

Pour situer :
J'ai une page web sur laquelle est présent un menu horizontal en haut de page. J'ai fait animer un petit curseur qui suit le mouvement de la souris (de façon horizontale) pour "cibler" la partie du menu sur laquelle je me trouve.

Problème :
Même lorsque je ne suis pas sur le bandeau du menu, le curseur suit encore le mouvement de ma souris. J'aimerai faire en sorte que le mouvement ne s'effectue que lorsque ma souris se trouve dans ce bandeau.

Voici le code :

<head>

<script type="text/javascript">
// <![CDATA[

var cursorx = 935;
var cursory = 126;

function move_cursor (e)
{
var mousex;
mousex = (navigator.appName.substring(0,3)=="Net")? e.pageX : event.x;
cursordx = mousex;
document.getElementById("cursor").style.left = cursordx + "px";
}

//]]>
</script>

</head>



<body>

<script type="text/javascript">
// <![CDATA[

document.write('<img id="cursor" src="style/blue-style/cursor.png" alt="" style="position:absolute; top:'+cursory+'px; left:'+cursorx+'px;" />');
document.onmousemove = move_cursor;

//]]>
</script>

...

</body>


Merci d'avance pour vos réponses ! Smiley smile
Salut :

en fait tu dois lui metre simplement des limites

var xMin = ...;
var xMax = ... ;

cursordx = (mousex < xMax) mousex : xMax ;
cursordx = (mousex > xMin) mousex : xMin ;

à la place de
cursordx = mousex ;

BonCode Smiley cligne
Oups ... j'ai oublié ? dans les clauses if ... dsl ! troop vite !! Smiley cligne

cursordx = (mousex < xMax) ? mousex : xMax ;
cursordx = (mousex > xMin) ? mousex : xMin ;


@+
Le vrai probleme est que tu fais:
document.onmousemove = move_cursor;

Tu dis au JS que tu veux executer move_cursor sur TOUT ton document HTML.
Ce qui est faut, tu veux veux executer move_cursor seulement sur ton menu horizontal.
La bonne solution serait de definir l'event mousemove que sur ton menu et PAS sur tout le document HTML.
Bonjour !

Désolé du retard mais je n'avais plus Internet Smiley confused
Merci beaucoup Nours et alixe pour vos réponses !

A vrai dire je voulais limiter l'event de façon verticale en faite, mon bandeau prend toute la largeur de la page donc ce n'est pas un problème en largeur, ou au pire j'utilise :

if (navigator.appName.substring(0,3)=="Net") largeur = window.innerWidth;
if (navigator.appName.substring(0,3)=="Mic") largeur = document.documentElement.clientWidth;
if (navigator.appName.substring(0,3)=="Moz") largeur = document.body.clientWidth;


Par contre c'est vrai que plutôt que définir des conditions pour "bloquer" l'event sur le reste de la page, ça a l'air plus simple de définir l'event uniquement pour le bandeau, mais comment m'y prendre pour faire cela ?
A vrai dire je ne savais même pas que le "document" de "document.onmousemove..." désignait la zone d'interaction de l'event... Smiley sweatdrop

Merci d'avance pour vos réponses, et encore désolé du retard.
Pas besoin de faire des tests de coordonnées, il faut juste que tu change la position ton image cursor au moment ou tu est sur le bandeau.


<head>
<script type="text/javascript">
// <![CDATA[

var cursorx = 935;
var cursory = 126;

function move_cursor (e)
{
var mousex;
mousex = (navigator.appName.substring(0,3)=="Net")? e.pageX : event.x;
cursordx = mousex;
document.getElementById("cursor").style.left = cursordx + "px";
}

//]]>
</script>
</head>
<body>
<script type="text/javascript">
// <![CDATA[

document.write('<img id="cursor" src="style/blue-style/cursor.png" alt="" style="position:absolute; top:'+cursory+'px; left:'+cursorx+'px;" />');

document.getElementById("id_bandeau").onmousemove = move_cursor;

//]]>
</script>
...
</body>
Bonjour,

Merci pour la réponse j'ai bien saisi le principe, j'ai utilisé ce script mais ça ne fonctionne pas. Smiley confus

J'ai l'erreur suivante dans la console d'erreur de Firefox :
a écrit :
Erreur : document.getElementById('main-menu') is null


Ma div (le bandeau que tu as nommé id_bandeau dans ton exemple) se nomme main-menu.

- Dans le CSS ça donne ça :
#main-menu {
width: 1024px;
height: 40px;
margin: 0px auto;
text-align: center;
}


- Dans le body de mon fichier HTML :
<div id="main-menu">

	<span><a class="menu" href="accueil.html">1</a></span>
	<span><a class="menu" href="animes-mangas.html">2</a></span>
	<span>3</span>
	<span><a class="menu" href="fanarts.html">4</a></span>
	<span><a class="menu" id="mylink" href="#contact">5</a></span>
	<span><a class="menu" href="formulaire.html">6</a></span>

</div>


Sachant que cette div est elle-même contenue dans une autre div... je ne sais pas si cela a de l'importance, j'imagine que non.

On peut vraiment utiliser l'id d'une div de la même façon que celle d'une image dans un script ?
Bonjour,

Voici un essai dont je ne suis pas très fier, mais qui peut être intéressant:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Page title</title>
	<style type="text/css" media="screen">
	body {
		margin: 0;
		padding: 0;
		font-size: 80%;
		font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
		color: white;
		background: #2D002E;
	}
	#cursor {
		position: absolute;
		display: none;
		width: 10px;
		height: 10px;
		background: red;
	}
	#header {
		padding: 50px 100px;
		border-bottom: 5px solid #5A0064;
		font-size: 8em;
		background: #1C0024;
	}
	#content {
		padding: 100px;
		font-size: 5em;
	}
	</style>
</head>
<body>

<span id="cursor"></span>
<div id="header">
	En-tête
</div><!-- #header -->

<div id="content">
	Contenu<br />
	mouse_x = <span id="mouse-x">?</span><br />
	mouse_y = <span id="mouse-y">?</span><br />
</div><!-- #content -->

<script type="text/javascript"><!--

// On crée un littéral objet pour ne pas trop polluer l'espace de nom
var animated_cursor = {};

// On récupère les noeuds DOM qui vont bien
animated_cursor.cursor = document.getElementById('cursor');
animated_cursor.text_x = document.getElementById('mouse-x').firstChild;
animated_cursor.text_y = document.getElementById('mouse-y').firstChild;

// Fonction pour récupérer la position du pointeur de la souris
// (honteusement pompée ailleurs)
animated_cursor.getMouseCoord = function (e) {
	if (!e) var e = window.event;
	var mouse = new Object();
	if (e.pageX || e.pageY) {
		mouse.x = e.pageX;
		mouse.y = e.pageY;
	}
	else if (e.clientX || e.clientY) {
		mouse.x = e.clientX + document.body.scrollLeft +
				  document.documentElement.scrollLeft;
		mouse.y = e.clientY + document.body.scrollTop +
				  document.documentElement.scrollTop;
	}
	return mouse;
};

// Fonction pour repositionner le machin
animated_cursor.moveCursor = function (pos) {
	var x = pos.x - 10;
	var y = pos.y - 10;
	animated_cursor.cursor.style.left = x+'px';
	animated_cursor.cursor.style.top  = y+'px';
}

// Et tant qu'à faire, affichons les coordonnées détectées
animated_cursor.modifyText = function (pos) {
	animated_cursor.text_x.nodeValue = pos.x;
	animated_cursor.text_y.nodeValue = pos.y;
}

// Pour finir, on associe les fonctions en question au moindre mouvement
// du pointeur de la souris
var page_header = document.getElementById('header');
page_header.onmousemove = function (e) {
	var m = animated_cursor.getMouseCoord(e);
	animated_cursor.moveCursor(m);
	animated_cursor.modifyText(m);
}

// Pour la route: on n'affiche le "cursor" qu'au survol du "header"
page_header.onmouseover = function () {
	animated_cursor.cursor.style.display = 'block';
}
page_header.onmouseout = function () {
	animated_cursor.cursor.style.display = 'none';
}

//--></script>

</body>
</html>


Je suis reparti de zéro à partir de la description du début. Le résultat a l'air de marcher plutôt bien, mais c'est sans doute inutilement lourd, ou perfectible, ou les deux.

Cela illustre en tout cas comment on peut appliquer un gestionnaire d'évènement (element.onMouseMove, c'est du DOM "Level 0", c'est à dire ne faisant partie d'aucune spécification) à un élément précis, ici le "header". Pour des besoins moins importants, on aurait pu écrire:
document.getElementById('header').onmousemove = quelqueChose;
(où quelqueChose est le nom d'une fonction qui sera exécutée à chaque fois que l'évènement "onmousemove" est déclenché)
C'est normal Maliki, le javascript essaie de mettre un écouteur d'évènement sur ton bandeau alors que la page html n'est pas encore totalement chargée.

En fait il faut donc attendre que toute ta page soit chargée pour mettre une action sur ton bandeau.

à la place de:

document.getElementById("id_bandeau").onmousemove = move_cursor;


tu mets:

window.onload = function { 
                           document.getElementById("id_bandeau").onmousemove = move_cursor;
                       }

Modifié par Glopp (10 Apr 2009 - 08:42)
Waaah un grand merci à vous deux ça fonctionne impeccable ! Smiley ravi

C'est vrai que c'est assez lourd comme code Florent mais j'ai testé et ça marche très bien. Dans mon cas le code de Glopp peut suffire largement j'imagine.

En revanche... je m'écarte un peu du sujet initial du topic mais j'aurai juste encore voulu savoir s'il était possible en quittant le bandeau de repositionner le curseur à son emplacement initial (les var cursorx et cursory auxquelles j'ai appliqué une valeur) ?

J'ai essayé différents tests mais rien n'y fait. Smiley ohwell
Maliki a écrit :
En revanche... je m'écarte un peu du sujet initial du topic mais j'aurai juste encore voulu savoir s'il était possible en quittant le bandeau de repositionner le curseur à son emplacement initial (les var cursorx et cursory auxquelles j'ai appliqué une valeur) ?

Dans le code que je donne ci-dessus il y a tout ce qu'il faut pour. Bien sûr, pour modifier les deux ou trois lignes nécessaires, il faut 1) comprendre le code et 2) avoir quelques bases (vraiment minimes) en JavaScript. (Mouais en fait ça ne fait qu'un seul point, pas deux...)
Essaie d'appliquer un événement onmouseout sur ton bandeau qui définira la position en x, y de ton curseur.

PS : je suis un grand fan de ton site. Smiley biggthumpup
Sujet clos
Aller à