Trucsweb.com

Forum de discussion

 Forum « Programmation Javascript » (archives)

Re: Afficher les coordonnées de la souris en fonction d'une image compatible DOM

Envoyé: 27 août 2005, 10h05 par Oznog


Salut,

Avant tout Netscape et Firefox ne sont vraiment pas le même moteur, loin de là. Netscape a été vendu à AOL (American On Line) il y a plusieurs années. Netscape 8 le confirme bien!

Mais les comcepteurs s'en sont allé et travail depuis sur Mozilla, qui lui est le papa de Firefox. C'est pas pour rien que Firefox est si performant pour son petit 5Mo.

Pour ta question, c'est une grosse commande, normalement on ne fait pas de script complet. Le tient est entièrement à refaire dans la mesure ou il ne contient aucun code compatible DOM. Enfin, c'est pas non plus très compliqué, tu peux lire sur le sujet. Par exemple "Modifier le contenu et la position des objets en DHTML" (http://www.trucsweb.com/DHTML/trucs.asp?no=280&type=2).

1. Avant tout tu dois être compatible DOM alors on y va avec le ID. <img id="monImage"... Il faut donc une image (avec une petite marge pour le test).

<p style="margin:100px;"><img src="http://www.trucsweb.com/img/t_tut4.gif"; width="276" height="60" id="monImage" ></p>

2. Ainsi tu peux récupérer l'objet image au complet :

// Compatible DOM
var oImage = document.getElementById("monImage")
// Et lui appliquer un style
oImage.style.cursor = "crosshair";

3. Mais aussi lui attacher une action lors d'un comportement :

// Compatible DOM
oImage.onmousemove = twPositionRelative

On peut en faire une fonction et l'appeller dès le chargement de la fenêtre. En fait c'est pour s'assurer que l'objet image est bien chargé. Tu pourrais mettre le code sans l'encapsuller dans une fonction SOUS la balise de l'image.

function twInit() {
var oImage = document.getElementById("monImage")
if (oImage) {
// Compatible DOM
oImage.style.cursor = "crosshair"
oImage.onmousemove = twPositionRelative
}
}

// Et pour activer la fonction
<BODY onLoad="twInit()">

4. Maintenant, DOM et IE on vraiment une défférence au niveau de la position. IE peut la récupérer d'un trait comme ton exemple avec window.event.offsetX; C'est à dire la position selon l'événement. DOM fonctionne différament. C'est la position de la page selon l'événement event.pageX auquel tu dois retirer la position de l'image offsetLeft et offsetTop.

function twPositionRelative(evt) {
// On récupère l'événement compatible
evt = (evt) ? evt : ((window.event) ? window.event : "");

if (evt) {
if (document.all) {
// IE
nOffsetX = evt.offsetX;
nOffsetY = evt.offsetY;
} else if (document.getElementById) {
// DOM
nOffsetX = evt.pageX - document.getElementById("monImage").offsetLeft;
nOffsetY = evt.pageY - document.getElementById("monImage").offsetTop;
}
// Trace
document.getElementById("hTrace").innerHTML = "X : "+nOffsetX+" ; Y : "+nOffsetY;
}

J'ai ajouté une trace.

Voilà le code complet. Il est surment possible de l'optimiser encore. Mais selon ce que tu veux en faire :

<html>
<haed>
<TITLE>Trucsweb : twPositionRelative - Position de la sourris sur une image.</TITLE>
<style type="text/css">
body {background-color:white}
#hTrace {font-weight:bold; background-color:cyan;}
</style>
<script type="text/javascript" language="javascript">
<!--
function twPositionRelative(evt) {
var nOffsetX;
var nOffsetY;
evt = (evt) ? evt : ((window.event) ? window.event : "");
if (evt) {
if (document.all) {
nOffsetX = evt.offsetX;
nOffsetY = evt.offsetY;
} else if (document.getElementById) {
nOffsetX = evt.pageX - document.getElementById("monImage").offsetLeft;
nOffsetY = evt.pageY - document.getElementById("monImage").offsetTop;
}
document.getElementById("hTrace").innerHTML = "X : "+nOffsetX+" ; Y : "+nOffsetY;
}
}

function twInit() {
var oImage = document.getElementById("monImage")
if (oImage) {
oImage.style.cursor = "crosshair"
oImage.onmousemove = twPositionRelative
}
}
// End -->
</script>
</haed>

<body onLoad="twInit()">
<p>Trace : <span id="hTrace"></span></p>
<p style="margin:100px;"><img src="http://www.trucsweb.com/img/t_tut4.gif"; width="276" height="60" id="monImage" ></p>
</body>
</html>

Ciao
Oznog


Réponses

 sp spRe: Afficher les coordonnées de la souris en fonction d'une image compatible DOM ganjaman6/6/2006
Aucun médias sociaux
X

Trucsweb.com Connexion

X

Trucsweb.com Mot de passe perdu

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte