Problème compatibilité mozille et ie

[snwoman49]

Bonjour,

J'ai fait un script js pour que les visiteurs puissent choisir le lieu de votre ville en cliquant sur une image,les valeurs de x et y de cette villes sont ensuite reportées dans un formulaire.

Le problème c'est que sous IE et sous mozilla les coordonnées sont totalement différentes pour un meme point.

Voici la fin du code:

 <INPUT id="Zone" style="WIDTH: 145px; HEIGHT: 22px" readOnly  type="text" size="8" name="Zone">
					  <br><br>
                      <INPUT TYPE="Submit" VALUE="Inscription">
                      <BR>
					   <P align="center"><IMG src="http://meteorologic.net/images/j0france.jpg" width="516" height="555" id="IMG1"></P>
                    <script id = "scr" language="javascript">
				function fun1(event2) {

				var isMinIE4 = (document.all)    ? 1 : 0;
				if(isMinIE4)
				{
				     xPosition = event.clientX?(event.clientX-document.getElementById("IMG1").offsetLeft+document.body.scrollLeft):event2.pageX-document.getElementById("IMG1").offsetLeft;
				     yPosition = event.clientY?(event.clientY-document.getElementById("IMG1").offsetTop+document.body.scrollTop):event2.pageY-document.getElementById("IMG1").offsetTop;
				}
				else
				{

			     xPosition = event2.offsetX?(event2.offsetX):event2.pageX-document.getElementById("IMG1").offsetLeft;
				 yPosition = event2.offsetY?(event2.offsetY):event2.pageY-document.getElementById("IMG1").offsetTop;
				}			    
					  document.getElementById('Zone').value = xPosition  + "." + yPosition;
                }
			    document.getElementById('IMG1').onmousedown = fun1;

				</script>
					</form>

Merci pour toutes vos réponses.

Amicalement snowman49.

Modifié 30 Juillet 2005 par snwoman49

[oxyd-x]

Salut snwoman49,

Internet Explorer ne gére pas correctement l'affichage sur écran (sans parlé des css), c'est donc, je pense, la cause de ton probleme.

Il éxiste des "parades" pour pallier à ces "oublies" de chez MS.

Ajoute, dans tes feuilles CSS, le code suivant,

html {

margin: 0px;

padding: 0px;

width: 100%;

overflow: auto;

}

body {

margin: 0px;

padding: 0px;

width: 100%;

}

enregistre, essaie, tes fenetres devrait avoir une visualisation complete.

Si ca ne marche toujours, peut-etre le probleme vient-il du fait qu'IE ne calcul pas correctement les marges, dans ce cas précis, il me faudrais, le code de ton css, et l'endroit ou est affiché "l'image représentative des villes", je t'indiquerai alors les valeurs à modifiées pour avoir un affichage compatible moz/ie/op/nesc

Voila, j'espere que ca pourra t'aider à trouver la solution.

@+ oxyd-x

Modifié 30 Juillet 2005 par oxyd-x

[snwoman49]

Merci pour ta réponse,ca ne marche pas.

Tient voici l'url de la page:

Page

Comme tu peux le voir j'utilise encore des tables

Meme si j'utilise les feuilles de style css pour certaines choses.

Enfin ca ne joue pas grand chose avec le site.

Modifié 30 Juillet 2005 par snwoman49

[TheRec]

Bonsoir,

j'ai regardé ta page et je vois que tu utilise Javascript pour compléter le champ avec les coordonnées. C'est effectivement une solution, mais approximativement 10% des visiteurs d'un site n'ont pas Javascript activé et ne pouront pas profiter de tes prévisions météo.

Il existe un moyen facile de palier à ce problème, segmente ton formulaire en 2 parties. La première partie propose à l'utilisateur de choisir un point sur la carte et aulieur d'utiliser une simple image, tu procède ainsi :

form1.php

<form action="form2.php" method="post">
  <input type="image" name="position" src="http://meteorologic.net/images/j0france.jpg">
</form>

form2.php

<?php
  echo "Coordonnée X ->".$_POST['position_x'];
  echo "Coordonnée Y ->".$_POST['position_y'];
?>

De cette manière tu ne dépends plus du tout du Javascript, tu peux tout à fait faire le traitement des données dans la même page ".php" .

N'hésite pas à demander plus de précision...

[snwoman49]

Si tu veux je leurs demandes de s'inscrire en chosissant leurs villes sur la carte pour ensuite lorsque qu'il poste des observations à cet Url

Leur obs s'affiche Ici sous forme de tableau.

Et là sous formes de carte ...

[TheRec]

Ok, je me doutais un peu, mais le système que je te propose fonctionne très bien... c'est plus "accessible" qu'utiliser du Javascript pour ta sélection de coordonnées.

Maintenant si tu veux utiliser le script Javascript que tu utilise maintenant, pas de problème. Je te conseille de voir la compatibilité des propriétés en Javascript Chaque navigateur implémente, n'implémente pas ou implémente partiellement certaines propriétés ou méthodes. Par exemple ici : http://www.quirksmode.org/js/events_compinfo.html

Je vois que tu utilise document.scrollLeft et document.scrollLeft en l'occurence et c'est un propriété n'est pas implémentée ou partiellement implémenté par certain navigateurs...

[dunjl]

Maintenant si tu veux utiliser le script Javascript que tu utilise maintenant, pas de problème. Je te conseille de voir la compatibilité des propriétés en Javascript Chaque navigateur implémente, n'implémente pas ou implémente partiellement certaines propriétés ou méthodes. Par exemple ici : http://www.quirksmode.org/js/events_compinfo.html

en effet très bonne adresse. D'ailleurs, voila issu de ce site le code cross-browser pour récupérer les coordonnées x et y de la souris

function getMouseX(e){
	if (!e) var e = window.event;
    if(window.opera)                                               //OP6
            return e.clientX;
    else if(document.all)                                           //IE4,IE5,IE6
            return document.body.scrollLeft+e.clientX;
    else if(document.layers||document.getElementById)               //N4,N6,Moz
            return e.pageX;
  }

function getMouseY(e){
	if (!e) var e = window.event;
    if(window.opera)                                                //OP6
            return e.clientY;
    else if(document.all)                                           //IE4,IE5,IE6
            return document.body.scrollTop+e.clientY;
    else if(document.layers||document.getElementById)               //N4,N6,Moz
            return e.pageY;
}

bon code

dunjl