Onmouseover -> offsetX ?

**bombseb** · 20/10/2006, 14h24

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

**Auteur** · 20/10/2006, 18h37

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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">
<!--
img{padding: 0px; margin: 50px}
 
//-->
</style>
 
 
<script type="text/javascript">
<!--
function position(obj,ev)
{  
  var Xfen, Xdoc, Yfen, Ydoc, el;
  Xfen = ev.clientX;
  Xdoc = Xfen + document.body.scrollLeft - obj.offsetLeft;
 
  Yfen = ev.clientY;
  Ydoc = Yfen + document.body.scrollTop - obj.offsetTop;
 
  el = document.getElementById("posSouris");
  el.innerHTML = " Ximg= "+Xdoc+" px ; Yimg= "+Ydoc+" px<br>";
  el.innerHTML+= " Xfen= "+Xfen+" px ; Yfen= "+Yfen+" px";
}
 
//-->
</script>
 
</head>
 
<body>
<br><br>
<img src="tests/images/clair19.jpg" onmousemove="position(this,event)">
<br><br>
<div id="posSouris">
</div>
</body>
 
</html>

**fichtre!** · 07/11/2006, 09h11

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

**SpaceFrog** · 07/11/2006, 09h12

ben rajoutes le srcollLeft ou le scrollTop ...

**fichtre!** · 07/11/2006, 11h50

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

Donc comment nommer cet element ?

**SpaceFrog** · 07/11/2006, 12h06

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("map").scrollLeft="200px";

**fichtre!** · 07/11/2006, 13h57

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

**fichtre!** · 13/11/2006, 11h27

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ...

**SpaceFrog** · 13/11/2006, 14h42

Chopper la position de la souris ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**fichtre!** · 13/11/2006, 15h19

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

**SpaceFrog** · 13/11/2006, 15h21

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('AdPoint').style.left = valeur + "px"

**SpaceFrog** · 13/11/2006, 15h33

n'oublies pas de mettre l'image en position absolute avec un z-index ...

**fichtre!** · 13/11/2006, 15h44

YES !!!

Merci encore ... je vais pouvoir avancer !

Eric

Onmouseover -> offsetX ?

JavaScript

Discussions similaires

Partager

Partager