creation d'un menu a la vista

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 :P

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 ^^)

tonImage.offsetTop / offsetLeft

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.

Juste, j'avais oublié de préciser ;)

Citation:

---

Envoyé par FremyCompany

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 :D tout ça parce qu'il y a eu gros-gourage sur la position de souris (bref, ça s'appel un bug vicieux)

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.

bon, ça fait un moment que j'essai, mais je ne m'en sors pas^^.

En fait, il semble qu'il soit impossible d'obtenir la position de la souris depuis une fonction, tout du moins sans passer l'objet event en paramètre.

Voici ma fonction:

function vista (self, e)
{
var x = e.offsetLeft;
var pos = self.offsetLeft;

//alert (x+' '+pos);
return 100 - abs(x - pos/2);
}

je ne sais pas si ça fonctionne (je crois que je m'emmèle un peu les pédales avec la division par deux) mais toujours est-il que cela ne fonctionne pas du tout.

le self correspond à this et le e à event.

Et le e refuse offsetLeft (sous mozilla).


Pour description, quand le curseur est hors de l'objet, celui çi n'est pas appelé.
quand le curseur est sur l'objet, on mesure la valeurs absolue entre le centre de l'image (droite/gauche) et le curseur, et on soustrait le résultat a une valeur.

Ceci fait que quand le curseur est sur le centre, la soustraction est nul, est l'image est la plus grosse possible (elle est égale a la valeur maximale).
Quand il est le plus loin, la soustraction est maximale, et l'objet a sa taille minimal.

En gros, c'est ça. Mais je n'arrive pas a faire la fonction.

Je suis complètement perdu (c'est mon premier vrai script en javascript).

Merci pour votre aide.

Salut,

Oui :p je crois que tu t'emmèle un peu les doigts sur le clavier

Mais c'est pas grave, c'est parce que tu débute, et alors tu es préoccupé par tout un tas de choses. Avec le temps, tu pourra avoir l'esprit plus tranquille et y voir plus clair.

Je t'aide quand-même un peu. Dans ton cas, pour la fonction que tu décris, il est préférable d'utiliser event.x et event.y, qui sont portables (sauf erreur de ma part), et qui donne des coordonée relative à l'image, à condition que le handler d'événement souris soit attaché à l'image elle-même, et non pas a un div dans lequel serait contenu l'image.

Les coordonnée sont left-right/top-down. C'est à dire que le point (0,0) est en haut à gauche de l'image.

Sur l'axe des x par exemple, le point centrale est à imageWidth/2, auquel du ajoute 1 si le modulo de la division est différent de zéro (ce qui te permet de tomber juste dans le cas d'une image dont la largeur est un nombre impaire.. c'est plus précis et donc plus propre). Ensuite, pour la distance par rapport au cente, tu prend la valeur absolue de la différence avec event.x, ou alors, si tu préfère être plus explicite, tu fait est un teste pour voir quelle est le plus grand des deux nombre.

Exemple :

Code:

---

1 2 3 4 5 6 7 8 9

var centreX; var sourisX; var deltaX;   centreX = (imageWidth / 2) + ((imageWidth % 2) != 0); sourisX = event.x; if (sourisX <= centreX) deltaX = centreX - sourisX; else deltaX = sourisX - centreX;

---

Et tu fait la même chose pour l'axe des y.

Oilà :)

tout d'abord, je n'ai pas d'excuse, car si je commence en javascript, je fais du php depuis un moment ^^.

Par contre, ta fonction ne marche pas.
Cela est surement du au fait que je suis sous Mozilla, mais event.x ne marche pas, et imageWidth n'est pas prédéclarée.

En fait, durant ce temps, j'ai fait ma propre fonction, qui donne des résultats, acceptable pour le moment, sauf un gros bug que je viens de m'appercevoir:

function vista2 (self, e, nom)
{
var larg = 50;
imageWidth = 20;
var pos = self.offsetLeft;
var x = e.clientX;

document.getElementById(nom).width = 2*larg - (Math.abs(x-pos-larg));
}

en fait, mon gros problème c'est cette ligne:
var pos = self.offsetLeft;

j'ai beau m'arracher les cheveux, je ne trouve pas comment faire pour avoir la position absolue de l'element sur la fenetre.
Car clientX qui fonctionne pour event ne marche plus dès lors qu'il s'agit d'autre chose. Et lui il me donne la position en absolue.

Et puis, autant en passant la souris de gauche a droite les image reprennent la valeur larg, autant dans le sens droite a gauche, il prennet 150% de la valeurs larg.
(si je met larg à 50, les item sont a 50 lorsque la souris est completement a gauche de l'objet, a 100 quand elle est au centre, et a 75 quand elle est au bord).

Je ne comprend pas pourquoi du tout.

(et quand je pense que je vais ensuite devoir appliquer ce genre de chose aux elements suivants et précédents, j'ai peur ^^).


Autre petite question: est-il normal qu'en passant la souris très vite les images ait des tailles assez aléatoire? Cela est-il du a mon ordinateur? a une erreur de javascript?

Meci pour vos réponse ^^

Citation:

---

Envoyé par bubuche87

Cela est surement du au fait que je suis sous Mozilla, mais event.x

---

Sous Mozilla ? event.x ne marche pas ? ... hé beh, c'est pas ça qui va m'encourager à faire du portage pour FireFox (de toute façon, je n'ai déjà pas beaucoup le climat qui tourne autour de ce navigateur). Si c'est vrai, FireFox n'a pas de quoi être fière :oops: (je dis encore des méchancetés, désolé)

Au passage, je me suis trompé, pour la souris, ce n'est pas x/y, mais offsetX/offsetY qu'il fallait utiliser (position relative à l'élément).

Citation:

---

ne marche pas, et imageWidth n'est pas prédéclarée.

---

Beh non, évidement :mouarf: c'est à toi de le déclarer,c'était juste une variable pour exprimer la logique du code.

Code:

---

1 2 3 4 5 6 7 8 9

function vista2 (self, e, nom) { var larg = 50; imageWidth = 20; var pos = self.offsetLeft; var x = e.clientX;   document.getElementById(nom).width = 2*larg - (Math.abs(x-pos-larg)); }

---

Là je ne comprend pas trés bien : tu as une variable « largeur » qui donne 50 et une variable imageWidth qui dit 20, et qui n'est d'ailleur pas utilisée.

en plus du soustrait une coordonnée globale et une coordonnée relative... ça ne va pas ;) Il suffit que ton offsetLeft ne soit pas relatif à la fenêtre pour que ça ne fonctionne pas (et il y a de bonne chance que ce ne soit pas le cas avec une page complexe)

Puis ensuite, en supposant que x-pos soit censé donner la position x dans l'image, pourquoi soustrais-tu larg ensuite ? Pour encore soustraire le résultat finale de larg ? (ou alors j'ai mal dormi... :oops: il fait chaud aujourd'hui )

Citation:

---

en fait, mon gros problème c'est cette ligne:
var pos = self.offsetLeft;

j'ai beau m'arracher les cheveux, je ne trouve pas comment faire pour avoir la position absolue de l'element sur la fenetre.

---

Il faut passer par offsetParent, comme expliqué dans un post précédent ;)

Citation:

---

Autre petite question: est-il normal qu'en passant la souris très vite les images ait des tailles assez aléatoire? Cela est-il du a mon ordinateur? a une erreur de javascript?

---

Beh oui, c'est normal... si le curseur de la souris se déplace vite, sa position sur l'image au moment où ses coordonnée son captée a de bonne chance d'être aléatoire.

Citation:

---

Meci pour vos réponse ^^

---

لا شكرا، على وجيب (de rien, y a pas d'quoi)

Pour éviter ce n'importe quoi (souris hors de l'image lorsque ton onmousemove est déclanché), test si les valeurs sont plausibles

Si tu obtiens une position de souris illégale, remet à zero les valeurs

tout d'abord, désolé pour le retard, j'était très malade (cette nuit, j'ai fait du 40 de fièvre, mais là ça va mieux).

Ensuite, merci pour vos conseils.

concernant le imageWidth qui n'est pas utilisé, en effet, c'est un résidu d'un test ^^""

Citation:

---

Citation:

---

en fait, mon gros problème c'est cette ligne:
var pos = self.offsetLeft;

---

j'ai beau m'arracher les cheveux, je ne trouve pas comment faire pour avoir la position absolue de l'element sur la fenetre.
Il faut passer par offsetParent, comme expliqué dans un post précédent ;)

---

justement, c'est là mon problème, c'est que je n'arrive pas a l'obtenir.
offSetParent me donne bien la position de l'élément parent mais... si celui ci est un tableau, cela ne change rien: ce n'est pas la position absolu. Je suppose que je pourrais encoreremonter d'un cran, mais enfait, cela n'est en définitive pas une bonne idée, car je ne pourrais jamais savoir dans combien d'élément est imbriquée cette image. (un tableau contenant un tableau, contenant un paragraphe, contenant l'image par exemple).

bon, pour expliquer cette petite ligne:
2*larg - (Math.abs(x-pos-larg));

on pourrais l'écrire comme ça:

larg - Math.abs(x-pos-(larg/2));
en divisant par deux la valeur de larg plus haut.

disons que: on fait la différence entre le centre de l'image et la position de la souris.si la souris est completement sur le bord de l'image
=> pos est égale a x (la position des deux est identique sur l'axe des x), et la largeur est égale elle même moins sa moitié (larg - larg/2).
dans notre cas: 25

quand le curseur se rapproche du centre, x-pos se rapproche de larg/2
=> larg se rapproche de larg - quelque_chose_qui_tend_vers_0.
dons notre cas: 50

quand le cusrseur dépasse le centre, x-pos-larg/2 deviens négatif, mais le fait d'utiliser Math.abs lui rend une valeur positive, et on recommenc a se rapprocher de la valeur larg - larg/2.

larg doit être égale a la taille maximal qu'aura l'image quand on passera dessus quoi :)

mais je ne comprend pas pourquoi cela ne marche pas pour la seconde moitié du parcours (ou la largeur tend vers larg-larg/4, d'aprés ce que j'ai pu constater expérimentalement.)

de plus, obtenir les deux coordonnées (souris et élément) en absolu ou en relatif m'irait, mais j'en ai un en relatif et l'autre en absolu ^^.

Merci pour votre aide et votre compréhension.

Salut,

Citation:

---

Envoyé par bubuche87

tout d'abord, désolé pour le retard, j'était très malade (cette nuit, j'ai fait du 40 de fièvre, mais là ça va mieux).

---

Ouf, oui alors, je te souhaite d'aller mieux, ça me ferait presque peur :(

Et puis ne t'excuse pas, tu n'a pas besoin... pourquoi le devrais-tu ?

Citation:

---

en fait, mon gros problème c'est cette ligne:
var pos = self.offsetLeft;

---

Oops, pardon, je n'avais pas remarquer un détail important : tu utilise self, est self fait référence à la fenêtre en cours.

Il ne faut pas confondre self et this. Dans de nombreux langage objet, self est souvent un équivalent the this. On a par exemple this en C++ et self en Pascal. Mais ici, en JavaScript, self et this sont différent, ou plutôt, self c'est le this de la fenêtre courante.

C'est une des ambiguïté les plus déroutantes quand on commence en JavaScript (et je considère que c'est un mauvais point de JavaScript).


Ensuite, il faut savoir que les gestionnaire d'événement ne reçoivent pas les mêmes paramètres selon qu'il sont attaché par un attribut HTML ou par une propriété.

Quand il sont attaché par un attribut HTML, alors il reçoivent en paramètre la valeur de self, et lorsqu'ils sont attaché par une propriété, ils reçoivent en paramètre le this correspondant à l'objet ayant déclenché l'événement.

Ex: si j'ai un gestionnaire de click, tel que

Code:

---

1 2 3 4 5 6

function onMyObjectClick () { /* Do anything you wish here */ /* Balabla, balablabla .... */ }

---

Si tu attache ton événement en faisant

Code:

---

1 2	<DIV id="myObject" onclick="onMyObjectClick();">...</DIV>

---

alors la fonction onMyObjectClick recevra en paramètre un pointeur sur la fenêtre courante (le self).

Tandis que si tu attache ton événement en faisant

Code:

---

1 2	<DIV id="myObject">...</DIV>

---

puis

Code:

---

1 2 3 4

var myObject; myObject = document.getElementById('myObject'); myObject.onclick = onMyObjectClick;

---

alors là la fonction onMyObjectClick recevra en paramètre un this qui correspond l'objet qui a généré l'événement (et cela fonctionne même si tu attache onMyObjectClick à plusieurs objet différents)

Il en est ainsi au moins sous Internet Explorer 5 et 6 et 7

Les autres navigateurs on une statégie différente dans le cas où le gestionnaire d'événement est attaché par un attribut HTML (comme dans le premier exemple).

C'est un peu déroutant au début, mais quand on le sait, cela se passe plutôt bien finalement :)

Allez, take care of yourself, et soigne toi bien, ne prend pas de coup de soleil ou de coup de frais ;)

@++

d'accord, je viens de comprendre un truc très important:

en fait, j'avais utilisé le mot self sans savoir qu'il était réservé en javascript: en théorie, quand on appel la fonction, on passe this en argument. "self" désignait cette argument. J'avais tout d'abord pensé a utiliser "lui_meme" comme nom, mais en fait, ça ne convenait pas (pas pratique, pas joli, pas anglais).
J'avais donc obté pour self.

Maintenant, j'apprend que javascript utilise self comme un mot clé ^^.

Effectivement, ça peut faire des résultats bizarre, et vous pouvez avoir du mal a comprendre ma fonction :)

bon, ce soir je n'ai pas le temps (j'ai juste le temps de voir mes mails, et ensuite dodo) et demain j'ai une journée chargée, mais ès que j'ai le temps, je me remet sur cette fonction.

merci a tous, et a plus ;)
(au sujet de mon idée, vous en pensez quoi en gros? inutile? très lourds? amusant?
J'aime avoir l'avis de gens ayant des connaissance dans le domaine quand je fais un truc ^^. J'aurai pu utiliser un simple onmouseover et onmouseout avec deux taille, mais ça faisais moche, et je me suis dit que c'était un bon prétexte pour progreser en javascript :) )

Citation:

---

Envoyé par bubuche87

(au sujet de mon idée, vous en pensez quoi en gros? inutile? très lourds? amusant?
[...] J'aurai pu utiliser un simple onmouseover et onmouseout avec deux taille, mais ça faisais moche, et je me suis dit que c'était un bon prétexte pour progreser en javascript :) )

---

L'idée... amusante, pourquoi pas, utile, probablement ;) Je ne pense pas que ce soit lourd, mais selon le contexte (je ne sais pas si c'est pour un site, ou si c'est pour un exercice), si c'est pour un site destiné à fonctionner vraiment, alors peut-être qu'amméliorer l'accessibilité en testant l'OS de l'internaute, et n'afficher le menu à la Vista que pour les utilisateurs ayant un XP/Vista ou un Linux, car pour les machines plus modestes, ce « dégradé de tailles d'image » peut être trés lent. En dehors de cette question d'accessibilité, c'est un bonne idée, je te rassure.

Bonne soirée

alors, tout d'abord bonne nouvelle (et moins bonne aussi): offsetX marche sous IE. (mauvaise nouvelle, il ne marche pas sous Firefox)

est-ce que tu pourrais me donner (et/ou me dire ou je peux trouver) la liste équivalente a celle donnée plus haut pour la position de la souris, mais pour un objet?

parce que j'ai essayé d'utiliser ce qui fonctionne pour la souris pour les objet (eh oui, j'aime essayer tout et n'importe quoi :oops:) mais ça ne fonctionne pas.

bon, j'ai fait pas mal de recherche, mais sans grand résultat.

en bref, si tu connais aussi un site avec une documentation sur le javascript, je suis preneur (tous ceux que j'ai vu ne connaissent même pas offsetLeft, alors je crois que je ne suis pas tombé sur les bons).
une sorte de doc comme celle pour le php sur php.net (avec "voir aussi telle_fonction et telle_autre_fonction" :) )

Ce qui me fait le plus enragé, c'est que mon ordi doit savoir comment on fait, lui :P (puisqu'il le fera quand j'aurai les commandes)

C'est pageX l'équivalent en DOM

ouais, merci beaucoup :)

bon, je me suis d'abord plongé sur celui sur gecko, dechiffrant avec peine cette anglais, mais parvenant a m'y retrouver grace au fait qu'il est vraiment très clair :)

(ensuite, quand j'ai eut fini, je me suis rendu compte qu'il y avait une version française
http://developer.mozilla.org/fr/docs...e_du_DOM_Gecko
:) )
bon, l'ennui c'est qu'il précise bien que c'est une brève liste. Et il n'y a pas ce que je cherche dedans (le moyen pour obtenir la position absolue de l'objet sur la page).

bon, je me suis plongé dans l'autre lien... enfin, façon de parler, car il m'a fallu vingts secondes pour que le site s'ouvre :)

j'ai essayé de trouver, mais d'une certine faon, si on connait le nom de ce qu'on cherche, je conçoit qu'il puisse être pratique pour avoir plus d'info sur la method, mais dans mon cas, cela revien a devoir passer toutes les method de tous les objets possible en revu, et je ne m'en sens pas le courage (pas en anglais en plus ^^)).

donc, merci, mais c'est pas encore tout a fait ça.

je vais chercher moi même de mon coté.

on y est presque :) (ça marche quand je bidouille (quand je le rend plus dépendent de ma page, en rentrant quelques données supplémentaires))