Discussion :

[bubuche87]

bonjour, je ne suis pas très doué en javascript, mais je progresse ^^.

Pour l'instant, je voudrais creer un menu a la vista, c'est a dire une série d'image qui grossissent progressivement quand on passe dessus.

J'insiste sur le "progressivement", car sinon, il me suffit de faire un onmouseover et un onmouseout avec deux tailles

Bon, j'ai déjà récupéré dans la FAQ la moyen pour obtenir la position de la souris.
Maintenant, je cherche comment faire pour avoir celle de l'image.

Je pense a faire que chaque image appel un evenement quand on passe la souris dessus. Cette evenement va concerner l'image suivante et la précédente aussi (mais pas plus loin, je pense).
ensuite, il faudra calculer la distance entre la souris et le centre de l'image, pour avoir le grossissement (il est maximum quand elle est au centre).

Bref, pour le moment, mon problème est d'obtenir le coordonnée d'une image a partir de son id.

Merci pour votre aide

(et si vous voulez me faire un peu de code, ce n'est pas de refus, bien sur ^^)

[FremyCompany]

tonImage.offsetTop / offsetLeft

[Hibou57]

Wé, comme dit Fremy, c'est ça. Mais il faut ajouter offsetParent, pour avoir l'élément qui joue le rôle de référentiel pour offetTop et offsetLeft. C'est le plus souvent l'élément BODY lui-même... mais pas toujours.

Les coordonnée de la souris fourni par l'objet event, sont en effet toujours relative à la fenêtre toute entière. Pour avoir les coordonnée de l'image relative à la fenêtre toute entière, il faudra éventuellement rajouter les coordonnée de l'élément offsetParent.

Par exemple si offsetParent est en x=5 et que l'image est en x=12 par rapport à offsetParent, alors la position réelle de l'image, sera x=5+12=17. offsetParent peut lui même être relatif à un autre offsetParent, et il faudra donc éventuellement adapté récursivement.

Je sais, c'est tatillon, mais formellement, c'est ainsi.

[FremyCompany]

Juste, j'avais oublié de préciser

[Hibou57]

Juste, j'avais oublié de préciser

Wé... sinon t'imagine le résultat : l'internaute balade sa souris sur la page... et d'un coup, sans prévenir, y a une image, comme ça, qui enfle d'un coup... surprise tout ça parce qu'il y a eu gros-gourage sur la position de souris (bref, ça s'appel un bug vicieux)

[Hibou57]

P'tite info :

Dans l'objet event, il y a plusieurs manière d'accéder à la position de la souris, et toutes ne sont pas relatives au même repère.

• clientX/clientY: position de la souris relativement à la zone cliente de la fenêtre (c'est-à-dire l'intérieur de la fenêtre, donc à l'exclusion des barre d'outils, barre d'état, barre d'ascenceur, etc)
• offsetX/offsetY: position de la souris relativement à l'objet qui a déclenché l'événement (faites donc éventuellement bien attention à l'objet auquel vous attaché l'événement... si vous placez une image dans un div, que vous attacher l'événement au div, et que le div à des padding.. alors...)
• screenX/screenY: position du pointeur de la souris relativement à l'écran (tout l'écran, même en dehors de la fenêtre du navigateur)
• x/y: position de la souris, relativement « à l'élément parent ». Cette dernière est plutôt ambigü. S'agit-il de l'élément parent du pointeur de la souris (donc l'élément dans lequel se trouve la souris), ou de l'élément parent de l'élément au dessus duquel se trouve la souris ? Je penche plutôt pour le deuxième cas, mais c'est à vérifier tout-de-même.