Coordonnée image (pb différent de jeff)

Eléphant du PHP | 231 Messages

27 nov. 2005, 17:53

http://test.derniere-bataille.net/carte_galaxie/

J'ai utilisé le script que Truc m'a trouvé sur Google : http://www.trucsweb.com/Forum/voirmessa ... osparent=1

je l'ai appliquer a mon image en .jpg et surprise sous IE ça fonctionne niquel alors que sous FF j'ai l'impression (j'en suis quasi persuadé après mes tests) que en fait c'est le tableau de ma page qui le dérange :roll: et qu'en fait il ne prend pas par rapport a l'image mais au bord de la page :?

et si je vire l'image de mon tableau ça fonctionne alors je vois pas trop d'ou ça vient :?

le code source de ma page

Code : Tout sélectionner

<html> <head> <title>Document sans titre</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="inc/style.css" rel="stylesheet" type="text/css"> <style type="text/css"> #coord { font-weight:bold; background-color:#510000; font-family: "Trebuchet MS"; font-size: 12px; color: #999999; } </style> <script language="JavaScript" type="text/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("carte_galaxie").offsetLeft; nOffsetY = evt.pageY - document.getElementById("carte_galaxie").offsetTop; } document.getElementById("coord").innerHTML = "X : "+nOffsetX+" ; Y : "+nOffsetY; } } function twInit() { var oImage = document.getElementById("carte_galaxie") if (oImage) { oImage.style.cursor = "crosshair" oImage.onmousemove = twPositionRelative } } </script> </head> <body bgcolor="#333333" onLoad="twInit()"> <table width="930" border="0" align="center" cellpadding="0" cellspacing="0" style="border: 1px solid #000000;"> <tr> <td colspan="3"><img src="img/b-h.jpg" width="930" height="20"></td> </tr> <tr> <td height="165" colspan="3" background="img/b-session-on.jpg" style="padding-top: 13px; padding-left: 750px;"> <form action="#" method="post"> <table width="160" border="0" cellspacing="0" cellpadding="0" class="connexion"> <tr> <td> <table width="160" border="0" cellspacing="0" cellpadding="0" class="connexion"> <tr> <td align="left"> Identification : </td> </tr> </table> <table width="160" border="0" cellspacing="0" cellpadding="0" class="connexion"> <tr> <td >Login : </td> <td align="right" valign="middle"> <input type="text" name="login" style="width: 115px;" class="connexion_input"></td> </tr> </table> <table width="160" border="0" cellspacing="0" cellpadding="0" class="connexion"> <tr> <td>Mot de Passe : </td> <td align="right" valign="middle"> <input type="password" name="password" style="width: 70px;" class="connexion_input"> </td> </tr> </table> <table width="160" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="right" valign="middle" style="padding-right: 2px; padding-top: 5px;"> <input type="image" src="img/send.jpg"> </td> </tr> </table></td> </tr> </table> </form></td> </tr> <tr> <td colspan="3" bgcolor="#510000" style="padding-top : 3px; padding-bottom : 3px; color: #999999; text-align : center; border-top: 1px solid #000000; border-bottom: 1px solid #000000;"> <a href="#" class="menu_links">ACCUEIL</a> | <a href="#" class="menu_links">LISTE D'ACHATS</a> | <a href="#" class="menu_links">BILAN</a> | <a href="#" class="menu_links">CARTE</a> | <a href="#" class="menu_links">MEMBRES</a> | <a href="#" class="menu_links">R&Egrave;GLES</a> | <a href="#" class="menu_links">FORUM</a> | </td> </tr> <tr bgcolor="#510000"> <td width="165">&nbsp;</td> <td width="600">&nbsp;</td> <td width="165">&nbsp;</td> </tr> <tr bgcolor="#510000"> <td align="center" style="padding-top : 10px; padding-bottom : 10px;">&nbsp;</td> <td align="center"><img src="galaxie.jpg" width="600" height="600" id="carte_galaxie"> <p><span id="coord"></span></p></td> <td>&nbsp;</td> </tr> <tr bgcolor="#510000"> <td>&nbsp;</td> <td>&nbsp; </td> <td>&nbsp;</td> </tr> </table> </body> </html>
Comment fait pour garder cette mise en page et que ça fonctionne quand meme :roll: (à savoir que sur le coté gauche il y aura un menu inclus en php et a droite des infos joueurs, news et autres aussi inclu en php...)

Eléphant du PHP | 231 Messages

27 nov. 2005, 18:19

en fait dans cette boucle

Code : Tout sélectionner

else if (document.getElementById) { nOffsetX = evt.pageX - document.getElementById("carte_galaxie").offsetLeft; nOffsetY = evt.pageY - document.getElementById("carte_galaxie").offsetTop; }
le pb reside dans le fait que document.getElementById("carte_galaxie").offsetLeft = 0 et de meme pour le offsetTop :roll: c'est bizard

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

27 nov. 2005, 18:50

encore un probleme IE / FF.... j'ai trouvé une solution un peu radicale mais qui marche :wink:

suffit de soustraire (dans ton cas) 203
nOffsetX = evt.pageX - document.getElementById("carte_galaxie").offsetLeft-203;
         nOffsetY = evt.pageY - document.getElementById("carte_galaxie").offsetTop -203;
enfait offsetTop est remis a 0 dans le TD donc ca pause probleme mais ça a l'air d'une page statique donc suffit de soustraire ce qui manque :wink:

/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute

Eléphant du PHP | 231 Messages

27 nov. 2005, 18:52

sauf que c'est pas forcement -203 ... ça depends de la résolution donc ça change pas le pb :?

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

27 nov. 2005, 18:55

c'est vrai aussi :x
je dis n'importe quoi, je suis en train de faire autre chose, dsl , j'ai pas trop le temps de regarder ça de plus pres... j'y reviendrai plus tard :wink:

/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

27 nov. 2005, 19:33

proposition,comme je n'ai pas trop le temps de faire simple :wink: , et pas trop le temps de jouer avec IE et FF voila une proposition qui marche:
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="inc/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
#coord {
   font-weight:bold;
   background-color:#510000;
   font-family: "Trebuchet MS";
   font-size: 12px;
   color: #999999;
}
</style>
<script language="JavaScript" type="text/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)
      {
         var t1_left=document.getElementById("t1").offsetLeft;
         var t2_left=document.getElementById("t2").offsetLeft;
		 
		 
		 var t1_top=document.getElementById("t1").offsetTop;
		 var t2_top=document.getElementById("t2").offsetTop;	 
		
		 
		 nOffsetX = evt.pageX - document.getElementById("carte_galaxie").offsetLeft-(t1_left+t2_left+1);
         nOffsetY = evt.pageY - document.getElementById("carte_galaxie").offsetTop-(t1_top+t2_top);
      }
   document.getElementById("coord").innerHTML = "X : "+nOffsetX+" ; Y : "+nOffsetY;
   }
}

function twInit()
{
   var oImage = document.getElementById("carte_galaxie")
   if (oImage)
   {
      oImage.style.cursor = "crosshair"
      oImage.onmousemove = twPositionRelative
   }
}
</script>
</head>
<body bgcolor="#333333" onLoad="twInit()">
<table id="t1" width="930" border="0" align="center" cellpadding="0" cellspacing="0" style="border: 1px solid #000000;">
  <tr>
    <td colspan="3"><img src="img/b-h.jpg" width="930" height="20"></td>
  </tr>

  <tr>
    <td height="165" colspan="3" background="img/b-session-on.jpg" style="padding-top: 13px; padding-left: 750px;">
<form action="#" method="post">
        <table width="160" border="0" cellspacing="0" cellpadding="0" class="connexion">
          <tr>
            <td> <table width="160" border="0" cellspacing="0" cellpadding="0" class="connexion">
                <tr>
                  <td align="left"> Identification : </td>
                </tr>

              </table>
              <table width="160" border="0" cellspacing="0" cellpadding="0" class="connexion">
                <tr>
                  <td >Login : </td>
                  <td align="right" valign="middle"> <input type="text" name="login" style="width: 115px;" class="connexion_input"></td>
                </tr>
              </table>
              <table width="160" border="0" cellspacing="0" cellpadding="0" class="connexion">

                <tr>
                  <td>Mot de Passe : </td>
                  <td align="right" valign="middle"> <input type="password"  name="password" style="width: 70px;" class="connexion_input">
                  </td>
                </tr>
              </table>
              <table width="160" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td align="right" valign="middle" style="padding-right: 2px; padding-top: 5px;">
                    <input type="image" src="img/send.jpg">
                  </td>

                </tr>
              </table></td>
          </tr>
        </table>
      </form></td>
  </tr>
  <tr>
    <td colspan="3" bgcolor="#510000" style="padding-top : 3px; padding-bottom : 3px; color: #999999; text-align : center; border-top: 1px solid #000000; border-bottom: 1px solid #000000;">
      <a href="#" class="menu_links">ACCUEIL</a> | <a href="#" class="menu_links">LISTE
      D'ACHATS</a> | <a href="#" class="menu_links">BILAN</a> | <a href="#" class="menu_links">CARTE</a>
      | <a href="#" class="menu_links">MEMBRES</a> | <a href="#" class="menu_links">R&Egrave;GLES</a>
      | <a href="#" class="menu_links">FORUM</a> | </td>

  </tr>
  <tr bgcolor="#510000" >
    <td width="165">&nbsp;</td>
    <td width="600">&nbsp;</td>
    <td width="165">&nbsp;</td>
  </tr>
  <tr bgcolor="#510000" >
    <td align="center"  style="padding-top : 10px; padding-bottom : 10px;">&nbsp;</td >
    <td align="center" id="t2"><img src="images/Site/fresque.jpg" width="600" height="600" id="carte_galaxie">
      <p><span id="coord"></span></p></td>

    <td>&nbsp;</td>
  </tr>
  <tr bgcolor="#510000">
    <td>&nbsp;</td>
    <td>&nbsp; </td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
enfait il faut calculer la position du tableau ( id="t1") et de la cellule (id="t2") et soustraire des 2 valeurs.

Comme je le disait, document.getElementById("carte_galaxie").offsetLeft, calcul par rapport au bord du contenant si tu n'avais pas de tableau ce serai l'écran hors ici c'est la cellule.

ca marche enfonction de la résolution ce coup ci :wink:

/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute