[JS] Trouver la position du curseur sur une image

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [JS] Trouver la position du curseur sur une image

nero27

Bonjour à tous,

Je suis débutant en JS et j'ai une fonction à programmer qui me pose problème. Je dois pouvoir récupérer la position du curseur lors d'un clic sur l'image mais pas en fonction du bord haut/gauche de la page mais en fonction du bord haut/gauche de l'image : est-ce possible ?
Si oui, pourriez-vous me mettre sur la voie ?

Merci d'avance :jap:

Publicité

nero27

Voici ce que j'ai fait : ça fonctionne sous IE, mais pas sous FF

Code :

<script type="text/javascript">
var cpt=1;
var bool=false;
var isIE = false;
//on détermine le navigateur
if (navigator.appName == "Microsoft Internet Explorer" ) {
isIE = true;
}
function coords()
{
//On gère la croix courante
if (cpt<7)
{
bool=true;
}
else
{
bool=false;
alert("Vous avez déjà coché 7 erreurs" );
}
cpt++;
if (bool)
{
var div1=document.getElementById("croix1"+cpt);
var div2=document.getElementById("croix2"+cpt);
var A=document.getElementById("A" );
div1.style.visibility="visible";
div2.style.visibility="visible";
if (isIE)
{
div1.style.left=window.event.offsetX-5;
div1.style.top=window.event.offsetY-5;
div2.style.left=window.event.offsetX-5;
div2.style.top=window.event.offsetY-5;
}
else
{
alert(A.offsetTop);
/*div1.style.left= A.offsetLeft - 5;
div1.style.top= A.offsetTop - 5;
div2.style.left= A.offsetLeft - 5;
div2.style.top= A.offsetTop - 5;*/
}
}
}
</script>
<div style="position: relative; width: 300px; height:300px;">
<img src="img/1A.jpg" style="position: absolute; left:0; top:0;" onclick="coords(this)" id="A"/>
<img src="img/croix.gif" style="position: absolute; left:10px; top:10px; width: 10px; height: 10px; visibility:hidden;" id="croix11" />
<img src="img/croix.gif" style="position: absolute; left:10px; top:10px; width: 10px; height: 10px; visibility:hidden;" id="croix12" />
<img src="img/croix.gif" style="position: absolute; left:10px; top:10px; width: 10px; height: 10px; visibility:hidden;" id="croix13" />
<img src="img/croix.gif" style="position: absolute; left:10px; top:10px; width: 10px; height: 10px; visibility:hidden;" id="croix14" />
<img src="img/croix.gif" style="position: absolute; left:10px; top:10px; width: 10px; height: 10px; visibility:hidden;" id="croix15" />
<img src="img/croix.gif" style="position: absolute; left:10px; top:10px; width: 10px; height: 10px; visibility:hidden;" id="croix16" />
<img src="img/croix.gif" style="position: absolute; left:10px; top:10px; width: 10px; height: 10px; visibility:hidden;" id="croix17" />
</div>
<div style="position: relative; width: 300px; height:300px;">
<img src="img/1B.jpg" style="position: absolute; left:0; top:0;" onclick="coords(this)" id="B"/>
<img src="img/croix.gif" style="position: absolute; left:10px; top:10px; width: 10px; height: 10px; visibility:hidden;" id="croix21" />
<img src="img/croix.gif" style="position: absolute; left:10px; top:10px; width: 10px; height: 10px; visibility:hidden;" id="croix22" />
<img src="img/croix.gif" style="position: absolute; left:10px; top:10px; width: 10px; height: 10px; visibility:hidden;" id="croix23" />
<img src="img/croix.gif" style="position: absolute; left:10px; top:10px; width: 10px; height: 10px; visibility:hidden;" id="croix24" />
<img src="img/croix.gif" style="position: absolute; left:10px; top:10px; width: 10px; height: 10px; visibility:hidden;" id="croix25" />
<img src="img/croix.gif" style="position: absolute; left:10px; top:10px; width: 10px; height: 10px; visibility:hidden;" id="croix26" />
<img src="img/croix.gif" style="position: absolute; left:10px; top:10px; width: 10px; height: 10px; visibility:hidden;" id="croix27" />
</div>

PS: c'est un jeu des 7 erreurs et je voudrais que les croix se placent sur les endroits cliqués sur l'image.

mIRROR

Chevreuillobolchévik

les evenements ne sont pas gérés de la meme facon sur ie et ff

enleve le this ici

onclick="coords(this)"

dans ta fonction fous un nom pour ton objet event, du genre
function coords(evt)

ensuite tu ourras appeler tes evenemens dans firefox avec evt.offsetSkeTuVeux

je suis aps trop sur de moi par contre
verifie sur la doc de mozilla

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

FORUM HardWare.fr

Programmation

HTML/CSS

[JS] Trouver la position du curseur sur une image

Sujets relatifs
trouver le fichier le plus récent	Recherche de composant HTML WYSIWYG + Image manager
Code de de réduction image auto en HTML	fonction(quelle image est dans mon clip)
débutant: trouver une chaîne dans une ligne, en remplacer une autre	récupérer la position d'un clip son connaitre son nom
Comment positionner un texte au dessus d'une image (CSS)	Cic sur image = Texte dans formulaire barré
Ajouter image dans un fichier pdf existant	[RESOLU] Probleme pour augmenter un DIV en fonction d'un autre
Plus de sujets relatifs à : [JS] Trouver la position du curseur sur une image

Page générée en 0.064 secondes