Discussion :

[Maxoo]

Bonjour,

Pour mon projet de Carte, à un moment j'ai eu un petit problème avec Firefox, mais j'ai pas pu venir le poser ici, j'ai préférer faire autrement. Mais maintenant que j'ai un peu plus de temps, j'ai fait une belle page propre pour expliciter le probème.

A partir de la FAQ PHP, j'ai fais un bout de code PHP qui affiche la valeur X et Y de la position de où on a cliquer sur l'image.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<form name="leform" method="post" action="/test/recuperer-position-image/index.php">
   <input type="image" name="img_envoi" src="image_envoi.png" class="image_envoi">
</form>

Le code marche à merveille, mais si on mets un style CSS sur la balise Input, et qu'on veuille par exemple la positionner, ou simplement la faire afficher au dessus d'un autre calque, ca merde.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<style type="text/css">
   .image_envoi {
     position: absolute;
     top: 50px;
     left: 200px;
   }
</style>

Vous pouvez tester l'exemple ici : http://maxime-pasquier.developpez.co...osition-image/

Avec Firefox 1.5.0.6 le X et Y sont changé, ce n'est plus la position de la souris sur l'image, mais sur la page en général.
Alors qu'avec Opéra 9 ou IE 6 cela marche toujours.

Qu'en pensez-vous ? un bug de firefox ?

Merci !!

[GregPeck]

Salut,

D'après mes tests, c'est la position par rapport au form et non à la page qui est renvoyé.
Si tu applique ta class au form, il n'y a plus de problème sur IE, Firefox et Opéra.

[Maxoo]

avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
            .box {
                height: 609px;
                widht: 632px;
            }
            .image_envoi {
                position: absolute;
                z-index: 1;
            }
            .image_envoi2 {
                position: absolute;
                z-index: 2;
            }

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<form method="post" action="'.$_SERVER['PHP_SELF'].'">
      <div class="box">
      <div class="image_envoi">
            <input type="image" name="img_envoi" src="image_envoi.png">
 
      </div>
      <img src="tt" class="image_envoi2">
      </div>
      toto
      </form>

Ca marche aussi, on a effectivement trouvé que si on applique le style à un DIV contenant la balise INPUT, cela marche et donc c'est cool.

cela dit la balise INPUT à le droit d'avoir une classe, et l'affectation d'un style comme les premiers que j'ai montré à cette balise ne devrait pas créer ce comportement désastreux.

Il y a bien un BUG dans firefox Après pour les développeurs, on peut le contourner, mais ca serait bien que ca soit réparé quand même

[Sub0]

Salut!

Il me semble que la solution suivante fonctionne avec tous les navigateurs :
http://www.developpez.net/forums/sho...414#post563414

Je crois que la position finale dépend également si le conteneur possède une position "relative" ou "absolute"...
à+

[Maxoo]

Salut!

Il me semble que la solution suivante fonctionne avec tous les navigateurs :
http://www.developpez.net/forums/sho...414#post563414

Je crois que la position finale dépend également si le conteneur possède une position "relative" ou "absolute"...
à+

Oui et non, déja je ne veux pas me servir de javascript la où y en a pas besoin, et je veux pas forcement la position réelle de la souris, mais la position d'un clic sur une zone d'une image.

donc la coordonnée du clic sur l'image.

[Maxoo]

Le topic est résolu.
Voir la solution ici : http://www.developpez.net/forums/sho...43#post1292343

Mais il existe bel et bien un bug sur Firefox.