Webmaster Hub > Problème compatibilité mozille et ie

Version complète: sur le forum Webmaster Hub : Problème compatibilité mozille et ie

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > Asp, Java, Cfm, autres.

snwoman49

samedi 30 juillet 2005 à 09:42

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:

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.

oxyd-x

samedi 30 juillet 2005 à 18:35

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,

CITATION

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

snwoman49

samedi 30 juillet 2005 à 20:51

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.

TheRec

samedi 30 juillet 2005 à 21:17

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

CODE

form2.php

CODE

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

samedi 30 juillet 2005 à 21:23

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

samedi 30 juillet 2005 à 22:25

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

mercredi 10 août 2005 à 16:15

CITATION

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

CODE

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

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.