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

par **Truc** » 27 nov. 2005, 19:33

proposition,comme je n'ai pas trop le temps de faire simple

, 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

par **Truc** » 27 nov. 2005, 18:55

c'est vrai aussi

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

par **dark_vidor** » 27 nov. 2005, 18:52

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

par **Truc** » 27 nov. 2005, 18:50

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

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

par **dark_vidor** » 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

c'est bizard

par **dark_vidor** » 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

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

(à 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...)

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

Répondre

Étendre la vue Revue du sujet : Coordonnée image (pb différent de jeff)

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