Onmouseover -> offsetX ?

Version imprimable

20/10/2006, 14h24
bombseb

Onmouseover -> offsetX ?

Bonjour,

J'ai une page web dans laquelle j'ai inséré une image
j'aimerais que lorsqu'on survole cette image avec la souris, une fonction javascript soit appellée (evenement onmouseover ou onmousemove) et que cette fonction puisse savoir quel est le pixel de l'image qui est survolé
(ces coordonnées x et y)
je crois qu'on peut utiliser offsetX et offsetY, mais je n'y arrive pas...
j'aimerais également que ce code soit compatible sur IE, Netscape et Firefox

par pitié aidez moi sinon je sent que je vais balancer mon pc par la fenêtre :aie:

bonjour,

tu ne peux pas connaître le pixel d'une image survolée. Néanmoins tu peux contourner le problème : le script ci-dessous affiche les coordonnées de la souris dans la page. J'ai simplement modifier l'origine (obj.offsetTop et obj.offsetLeft). La fonction se déclenche lors du mousemove sur l'image.
Par contre ce script ne tient pas compte d'un éventuel agrandissement ou d'une réduction de l'image.

Sous IE l'origine de 'limage n'est pas à (0,0).
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 <html> <head> <title></title> <style type="text/css">  </style> <script type="text/javascript">  </script> </head> <body> <br><br> <img src="tests/images/clair19.jpg" onmousemove="position(this,event)"> <br><br> <div id="posSouris"> </div> </body> </html>

07/11/2006, 09h11
fichtre!

Bonjour,

Je fais un "up" de ce sujet.
L'exemple ci-dessus marche parfaitement, mais comment faire lorsque la taille de l'image est superieure à celle de l'écran et que l'on navigue sur cette image avec des scrollbars ?
Dans ce cas, evidement, on récupère bien la position de la souris, mais qui ne correspond plus aux "coordonnées" sur l'image scrollée ...

Quelqu'un a t'il une piste ?

Merci pour votre aide.

ERic
07/11/2006, 09h12
SpaceFrog

ben rajoutes le srcollLeft ou le scrollTop ...
07/11/2006, 11h50
fichtre!

OK, merci pour cette réponse.
Question subsidiaire, l'image en question se trouve dans une balise appelée map (<div id="map">; comment faire un ScrollTo sur cette balise ?
J'ai essayé un truc du genre,
document.getElementById("map").scrollTo(0,200);
qui bien sur ne fonctionne pas :oops:
Donc comment nommer cet element ?
07/11/2006, 12h06
SpaceFrog

Code:

document.getElementById("map").scrollLeft="200px";
07/11/2006, 13h57
fichtre!

Merci beaucoup, c'est tout à fait ça ...

Bonjour,

Encore une question subsidiaire sur la base de la discussion précédente :

J'ai toujours mon image dans une balise appelée map (<div id="map">; J'essaye de faire simplement apparaitre un bloc à l'endroit du double-clic sur cette image. J'ai essayé ça :
Code:

1 2 3 4 5 6 7 function showAdPoint(e){ obj=document.getElementById('AdPoint'); obj.style.left = e.PageX; obj.style.top = e.PageY; obj.style.display="block"; }
fonction que j'appelle de la sorte :
Code:

1 2 3 4 5 <dl class="map" OnDblClick="showAdPoint(event)"> <div id="AdPoint"> bla bla </div>
dans la feuille de style, je déclare :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 #AdPoint { position:relative; width:250px; padding:4px; border:#222 2px solid; background:#666; -moz-border-radius:8px; border-radius:8px; z-index:11; font-size:0.8em; color:#FFF; }
Au final, le bloc s'affiche bien, mais dans le coin gauche / haut de l'image et non à la position du double-clic ???

Merci pour vos pistes ...

Chopper la position de la souris ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<SCRIPT LANGUAGE="JavaScript"><!-- 
if (navigator.appName == 'Netscape') { 
document.captureEvents(Event.MOUSEMOVE); 
document.onmousemove = netscapeMouseMove; 
} 
 
function netscapeMouseMove(e) { 
if (e.screenX != document.test.x.value && e.screenY != document.test.y.value) { 
document.test.x.value = e.screenX; 
document.test.y.value = e.screenY; 
} 
} 
 
function microsoftMouseMove() { 
if (window.event.x != document.test.x.value && window.event.y != document.test.y.value) { 
document.test.x.value = window.event.x; 
document.test.y.value = window.event.y; 
} 
} 
//--></SCRIPT>

13/11/2006, 15h19
fichtre!

merci pour ce script, mais j'avoue ne pas bien suivre...
récupérer la position de la souris, c'est OK ...
ce qui me manque c'est l'étape d'après ...
ça doit être une erreur de syntaxe, car si je passe une constante par exemple :
document.getElementById('AdPoint').style.left = "100px"; là ça marche ...

Eric
13/11/2006, 15h21
SpaceFrog

Code:

document.getElementById('AdPoint').style.left = valeur + "px"
13/11/2006, 15h33
SpaceFrog

n'oublies pas de mettre l'image en position absolute avec un z-index ...
13/11/2006, 15h44
fichtre!

YES !!!

Merci encore ... je vais pouvoir avancer !

Eric