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
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
| |||||||
![[Photo]](https://www.trucsweb.com/documents/images/2024/js-bs-formulaire-fetch.png)
Formulaire Bootstrap 5 Ajax avec validation.![[Photo]](http://www.trucsweb.com/documents/images/2023/elephants-Salvador_Dali_1948.jpg)
Sécuriser l’accès « bureau à distance » sous IIS![[Photo]](http://www.trucsweb.com/documents/images/2023/trou_noir_galaxie_M87.jpg)
L’AI au temps du Far-Web![[Photo]](http://www.trucsweb.com/documents/images/2023/gilles-villeneuve-montreal1978.jpg)
Sélecteurs JavaScript querySelector() et querySelectorAll()![[Photo]](http://www.trucsweb.com/documents/images/2023/evolution_de_lhomme.jpg)
CSS - Animations![[Photo]](http://www.trucsweb.com/documents/images/2023/univers-copernic.jpg)
Mode de couleurs (Color modes) Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/2023/les_burgers_de_papa.jpg)
25 ans des Trucsweb - Bouton hamburger animé Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/logos/l_whatwg.svg)
Living Standard pour HTML de Apple, Google, Mozilla, Microsoft ...et la W3C![[Photo]](http://www.trucsweb.com/documents/images/2022/tim-berners-lee-web-b.jpg)
Le nouveau HTML « Living Standard » et le XML![[Photo]](http://www.trucsweb.com/documents/images/2022/v_jacques_dutronc-les_cactus.jpg)
Sécuriser un formulaire de contact au Far-Web!
AbuseIPDB
Connexion![http://www.trucsweb.com/img/t_tut4.gif"](http://www.trucsweb.com/img/t_tut4.gif"){kind=link}