Forum d'entraide PHPFrance

J'ai une image qui se situe dans un tableau [voir la page]

<table width="930" height="700" border="0" align="center" cellpadding="0" cellspacing="0" class="txt" id="table" style="border: 1px solid #000000;">
  <tr>
    <td id="cell" align="center"><img src="img/galaxie.jpg" id="carte_galaxie" style="cursor : crosshair;" width="600" height="600" border="0" usemap="#galaxie"></td>
  </tr>
</table>

J'aimerai positioné sur celle ci une autre image et le 0 serait le coin supérieur-gauche de cette même image comment faire ?

la source qui me donnera le positionnement des images est en php :

<?
$sql = mysql_query("SELECT coord_x, coord_y FROM planetes WHERE players=".$_SESSION['id_user']);
if (mysql_num_rows($sql) != 0)
{
	while (list($coord_x, $coord_y) = mysql_fetch_row($sql))
	{
		$left = $coord_x-15;
		$top = $coord_y-15;
		echo('<img src="img/vous-ici.gif" width="30" height="30" style="position: absolute; top: '.$top.'px; left:'.$left.'px;">');
	}
}
?>

si vous aviez une idée

Il faut que l'image positionnée soit à l'intérieur d'un élément qui soit lui-même positionné, même en relatif éventuellement : de cette manière, la seonde image sera en absolu par rapport aux dimensions de l'élément parent dans lequel elle est insérée.

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

y'a plus qu'un pb sous ie il en veux pas de mon positionnement ...

c'est con parce que la ça fonctionne ^^

j'y suis presque quoi

J'ai essayer de trouver comment tu positionnais des éléments, pour les trois cercles, je n'ai pas trouvé. Le principe est le suivant :

Dans un élément positionné, tu peux positionner d'autres éléments à l'intérieur. Exemple :

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Éléments positionnés</title>
<style type="text/css">
/* <![CDATA[ */
#carre {
    width: 400px;
    height: 400px;
    border: 3px dashed #ccc;
    position: absolute;
    top: 150px;
    left: 50%;
    margin-left: -200px;
}
#point1 {
    position: absolute;
    top: 200px;
    left: 205px;
    border: 1px solid #c00;
    margin: 0;
}
#point2 {
    position: absolute;
    top: 100px;
    left: 155px;
    border: 1px solid #c00;
    margin: 0;
}
/* ]]> */
</style>
</head>
<body>
<div id="carre">
  <p  id="point1">1</p>
  <p id="point2">2</p>
</div>
</body>
</html>

Affiche ce code dans n'importe quel navigateur et inspire-t-en pour ajuster ta feuille de style.

J'ai essayer de trouver comment tu positionnais des éléments, pour les trois cercles, je n'ai pas trouvé.

Code : Tout sélectionner

<td height="600" align="left" valign="top" background="http://game.derniere-bataille.net/img/fond_carte.jpg" id="cell"> 
      <img src="http://game.derniere-bataille.net/img/vous-ici.gif" width="29" height="29" style="position: absolute; padding-top: 478px; padding-left:162px; z-index: 0;"><img src="http://game.derniere-bataille.net/img/vous-ici.gif" width="29" height="29" style="position: absolute; padding-top: 337px; padding-left:466px; z-index: 0;"><img src="http://game.derniere-bataille.net/img/vous-ici.gif" width="29" height="29" style="position: absolute; padding-top: 482px; padding-left:476px; z-index: 0;"> 
      <img src="http://game.derniere-bataille.net/img/galaxie.gif" id="carte_galaxie" style="cursor : crosshair; position: absolute; z-index: 1;" width="600" height="600" border="0" usemap="#galaxie"></td>

une simple superposition avec des padding ... mais sous ie les padding il en veux pas

Au lieu d'un padding, fais un positionnement, là ça va fonctionner, position relative, ce sera relatif à l'élément parent, donc la cellule td

plus simplement avec un margin ça a l'air de fonctionner

Méfie-toi, les marges sont parfois diversement interprétées d'un navigateur à l'autre, un positionnement sera beaucoup plus sûr :
Si tu positionnes ton vaiseau près de Tatooïne sous Firefox, il risque de se retrouver près de Dagobah sous Internet Explorer : les conséquences risquent de varier un peu dans la vision du jeu même si les actions auront théoriquement la même conclusion.

j'ai fais les tests

sous 800*600 / Win 98SE

ok pour les 2 navigateurs
sous 1024*768 / Win XP

ok pour les 2 navigateurs
sous 1280*1024 / Win XP

ok pour les 2 navigateurs
sous 1600*1200 / Win XP

ok pour les 2 navigateurs

et sous mon pc : 1440*768 / Win XP

ok pour les 2 navigateurs

je crois que c'est bon ^^

c'est résolu

merci de ton aide en tt cas

l'exemple du positionnement je le garde il est pas mal

Alors c'est excellent, que la force soit avec toi

tu veux venir essayer le jeu une fois fini

Je ne suis habituellement pas très jeux online, mais c'est pas exclus que je vienne faire un tour, pourquoi pas, en Dark Cyranus, je serait peut-être acceptable pour me faire éclater la tête en deux coups de sabre laser

gniark ... tu peux venir en simple programmeur pour donner des conseils

Ben tu me préviendras quand ce sera opérationnel et j'irai faire un tour, mais je ne promets pas une grande assiduité

Forum d'entraide PHPFrance

[css] Positionnement d'une img par rapport a une autre img

[css] Positionnement d'une img par rapport a une autre img