Aller au contenu

Problème compatibilité mozille et ie


snwoman49

Sujets conseillés

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é par snwoman49
Lien vers le commentaire
Partager sur d’autres sites

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 :D

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

@+ oxyd-x

Modifié par oxyd-x
Lien vers le commentaire
Partager sur d’autres sites

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 :hypocrite:

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

Enfin ca ne joue pas grand chose avec le site.

Modifié par snwoman49
Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

  • 2 semaines plus tard...
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

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...