PHWinfo - Afficher un message - Indiquer la position de la souris : javascript ?

27/04/2008, 16h59

Le Sat, 26 Apr 2008 12:39:00 +0200, Mickaël Wolff a écrit:
> Hugolino a écrit :
>
> > Dans un TP, <http://urlalacon.com/B2eh1o> j'ai besoin que mes élèves
> > analysent des jpeg extraits d'une vidéo. J'aurais besoin que s'affiche
> > dans le navigateur la position de la souris (en pixels).
>
> On pourrait penser que c'est trivial, mais non. Pour avoir la position
> dans l'image, il faut déjà savoir où est l'image, car les coordonnées de
> clique données par l'événement est relative à la zone d'affichage ou
> l'origine du document.

Attention, je veux d'une part que:
* la position de la souris (x et y) soit constamment affichée dans deux
champs (champ_x_px et champ_y_px) et mise à jour en temps réel, pas
que le user soit obligé de cliquer.
* que lors d'un clic, la position de la souris soient affichées dans
deux autres champs, appelons-les champA_x et champA_y
* que lors d'un MAJ-clic (merci à SAM pour l'idée) la position de la
souris soit affichée dans champB_x et champB_y, et puisque je connais
la dimension de la pièce en plastique, qu'un facteur de conversion
entre pixel et mm soit calculé et que finalement, en dessous de
champ_x_px et champ_y_px, soit troujours en temps réel, affiché les
coordonnée de la souris en mm à partir du coin supérieur gauche de la
photo.

> Avec l'interface normale DOM :
Tout ce que je sais de DOM, c'est que ça signifie "Document Object
Model", mais je ne sais pas vraiment à quoi ça sert, si c'est
indispensable pour faire ce que je veux et si ça va être facile à
comprendre.
J'ai jeté un oeil sur sa définition sur wikipedia, ça a l'air quand même
d'un marteau pour écraser une mouche quand on le rapporte à mon petit
problème

> <http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-eventgroupings-mouseevents>

Malheureusement en anglais, que j'arrive à lire une fois que j'ai
apréhendé les notions de bases à partir d'un document en français.

> Il faut donc connaître la position de l'image (pour faire un
> changement de coordonnées). Mais.. rien de normalisé (qu'on me corrige
> si je me trompe) ne permet de récupérer la position d'un élément.
> offsetTop et offsetLeft sont les attributs javascript d'un élément HTML
> assez répendus.

Si ça pose un problème, je mets toutes les marges à zéro et je coince
l'image en haut à gauche.

> Ensuite, attraper les événements de la souris est assez simple, que ce
> soit via les attributs HTML
> <http://www.w3.org/TR/html4/struct/objects.html#edef-IMG>, l'API DOM
> Event
> <http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-eventgroupings-mouseevents>,
> ou l'objet javascript
> <http://developer.mozilla.org/en/docs/DOM:element#Introduction>.

> > Est-ce que seul un langage de script comme javascript permettrait de
> > faire ça, ou est-ce que je peux m'en tirer avec de la css pure. Parce
> > que javascript, j'y connais rien :/
>
> Les CSS sont destinées pour la présentation, pas pour l'interactivité.

C'est juste, mais j'ai été surpris par certains sites qui ne fonctionne
qu'avec les CSS alors que j'étais à première vue persuadé qu'il y a
avait des scripts derrière...

> > Tant qu'à faire, si javascript est requis, il faudrait qu'ils puissent
> > cliquer deux points particuliers de la photo pour que les pixels soit
> > convertis en millimètre. (parce que je connais la distance entre ces
> > deux points qui se déplacent sur les photos).
>
> Pas de problème, il suffira de le coder.

Il s'agira d'une bête mise à l'échelle.

> > D'ailleurs puisque je ne connais rien à javascript, est-ce qu'il n'y
> > aurait pas maintenant un langage coté client plus évolué/facile/puissant
> > que javascript, ou est-ce devenu un standard incontournable ?
>
> Je me disais bien que c'était un troll

J'avoue ne pas comprendre en quoi mon poste peut passer pour un troll.

> Tu peux utiliser le langage que tu souhaites, il faut que le
> navigateur puisse l'interpréter. Ce qu'il y a de plus répandu, ce sont
> des dialectes d'ecmascript, abusivement nommés javascript. Il y a entre
> autre javascript(mozilla) et jscript(microsoft), sans compter les
> implémentations des autres navigateurs qui tentent d'avoir le
> comportement le plus proche possible de la norme ou du standard (MS).
>
> Mais javascript est un langage assez simple, je vois difficilement
> comment faire plus simple tout en conservant sa puissance. Et en quoi
> javascript n'est pas un langage évolué, à défaut d'être évalué (oui,
> c'est facile) ?

Bon, bin va falloir s'y mettre

--
C'est l'histoire d'un gars qui veut la machine la plus puissante du
monde sous Windows 95 en emulation sous Wine qui tourne sur une station
FreeBSD avec bibliotheque de compatibilite Linux.
Hugo (né il y a 1 388 766 415 secondes)

27/04/2008, 16h59	#8
Hugolino Messages: n/a Hébergeur:	Re: Indiquer la position de la souris : javascript ? Le Sat, 26 Apr 2008 12:39:00 +0200, Mickaël Wolff a écrit: > Hugolino a écrit : > > > Dans un TP, <http://urlalacon.com/B2eh1o> j'ai besoin que mes élèves > > analysent des jpeg extraits d'une vidéo. J'aurais besoin que s'affiche > > dans le navigateur la position de la souris (en pixels). > > On pourrait penser que c'est trivial, mais non. Pour avoir la position > dans l'image, il faut déjà savoir où est l'image, car les coordonnées de > clique données par l'événement est relative à la zone d'affichage ou > l'origine du document. Attention, je veux d'une part que: * la position de la souris (x et y) soit constamment affichée dans deux champs (champ_x_px et champ_y_px) et mise à jour en temps réel, pas que le user soit obligé de cliquer. * que lors d'un clic, la position de la souris soient affichées dans deux autres champs, appelons-les champA_x et champA_y * que lors d'un MAJ-clic (merci à SAM pour l'idée) la position de la souris soit affichée dans champB_x et champB_y, et puisque je connais la dimension de la pièce en plastique, qu'un facteur de conversion entre pixel et mm soit calculé et que finalement, en dessous de champ_x_px et champ_y_px, soit troujours en temps réel, affiché les coordonnée de la souris en mm à partir du coin supérieur gauche de la photo. > Avec l'interface normale DOM : Tout ce que je sais de DOM, c'est que ça signifie "Document Object Model", mais je ne sais pas vraiment à quoi ça sert, si c'est indispensable pour faire ce que je veux et si ça va être facile à comprendre. J'ai jeté un oeil sur sa définition sur wikipedia, ça a l'air quand même d'un marteau pour écraser une mouche quand on le rapporte à mon petit problème > <http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-eventgroupings-mouseevents> Malheureusement en anglais, que j'arrive à lire une fois que j'ai apréhendé les notions de bases à partir d'un document en français. > Il faut donc connaître la position de l'image (pour faire un > changement de coordonnées). Mais.. rien de normalisé (qu'on me corrige > si je me trompe) ne permet de récupérer la position d'un élément. > offsetTop et offsetLeft sont les attributs javascript d'un élément HTML > assez répendus. Si ça pose un problème, je mets toutes les marges à zéro et je coince l'image en haut à gauche. > Ensuite, attraper les événements de la souris est assez simple, que ce > soit via les attributs HTML > <http://www.w3.org/TR/html4/struct/objects.html#edef-IMG>, l'API DOM > Event > <http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-eventgroupings-mouseevents>, > ou l'objet javascript > <http://developer.mozilla.org/en/docs/DOM:element#Introduction>. > > Est-ce que seul un langage de script comme javascript permettrait de > > faire ça, ou est-ce que je peux m'en tirer avec de la css pure. Parce > > que javascript, j'y connais rien :/ > > Les CSS sont destinées pour la présentation, pas pour l'interactivité. C'est juste, mais j'ai été surpris par certains sites qui ne fonctionne qu'avec les CSS alors que j'étais à première vue persuadé qu'il y a avait des scripts derrière... > > Tant qu'à faire, si javascript est requis, il faudrait qu'ils puissent > > cliquer deux points particuliers de la photo pour que les pixels soit > > convertis en millimètre. (parce que je connais la distance entre ces > > deux points qui se déplacent sur les photos). > > Pas de problème, il suffira de le coder. Il s'agira d'une bête mise à l'échelle. > > D'ailleurs puisque je ne connais rien à javascript, est-ce qu'il n'y > > aurait pas maintenant un langage coté client plus évolué/facile/puissant > > que javascript, ou est-ce devenu un standard incontournable ? > > Je me disais bien que c'était un troll J'avoue ne pas comprendre en quoi mon poste peut passer pour un troll. > Tu peux utiliser le langage que tu souhaites, il faut que le > navigateur puisse l'interpréter. Ce qu'il y a de plus répandu, ce sont > des dialectes d'ecmascript, abusivement nommés javascript. Il y a entre > autre javascript(mozilla) et jscript(microsoft), sans compter les > implémentations des autres navigateurs qui tentent d'avoir le > comportement le plus proche possible de la norme ou du standard (MS). > > Mais javascript est un langage assez simple, je vois difficilement > comment faire plus simple tout en conservant sa puissance. Et en quoi > javascript n'est pas un langage évolué, à défaut d'être évalué (oui, > c'est facile) ? Bon, bin va falloir s'y mettre -- C'est l'histoire d'un gars qui veut la machine la plus puissante du monde sous Windows 95 en emulation sous Wine qui tourne sur une station FreeBSD avec bibliotheque de compatibilite Linux. Hugo (né il y a 1 388 766 415 secondes)