Une carte en image dynamique

[notalone]

Merci à tous pour vos réponse fortes intéressante, le Z index c'est quoi exactement?

Pour ma carte il s'agira d'une image tout simplement en 480*480 les ordonnée s'affiche automatiquement sur des inputs pour que le joueur sâche ou est sa souris et en faites je comptes mettre des icônes sur lesquels les joueurs pourront cliquer dessus et voir leur bâtiment en plus gros une sorte d'effet de zoom

sa rendra mon jeu encore plus vivant pour le joueur.

[atra27]

Zindex....
Disont que tu as des balises pour positionner sur X et Y...
Et bien Zindex c'est la profondeur...
Ainsi tu peut regler quel element sera devant quel autre en réglant la valeur...

Zindex:100 sera derriére Zindex:10 par ex (ou l'inverse... jsais plus :$)

[gameprog2]

Plusieurs t'ont conseillé de bucher les DIV, alors tu trouvera la réponse à ta dernière question ainsi, Google est ton ami

[notalone]

lol gameprog2 je suis bien placé pour savoir que google est notre ami ^^ mais étant là j'ai voulus poser la question

[notalone]

j'ai réussit à faire ce que je voulais grâce à des divs, mais le problème et que quand je règles lef et top dans la feuille de style, pour ma résolution ok niquel mais pour une personne qui à moins que moi bah les images que je veux afficher sur l'image principale sont totalement décalé ^^

---

huum savez vous comment on peut faire commencer les points de coordonnées x et y à partir d'un div et non à partir du haut gauche de l'écran? Oo j'ai beau chercher sur google mais je n'arrives pas à trouver la réponse à ma question:/

[php_addict]

j'ai réussit à faire ce que je voulais grâce à des divs, mais le problème et que quand je règles lef et top dans la feuille de style, pour ma résolution ok niquel mais pour une personne qui à moins que moi bah les images que je veux afficher sur l'image principale sont totalement décalé ^^

---

huum savez vous comment on peut faire commencer les points de coordonnées x et y à partir d'un div et non à partir du haut gauche de l'écran? Oo j'ai beau chercher sur google mais je n'arrives pas à trouver la réponse à ma question:/

certainement un probleme de positionnement de tes div (absolute ou relative)

[notalone]

bah au debut j'ai mis mon image de font (la map principale) dans un div pré réglé avec du css et les autre div qui contiennent les images à rajouter dans des divs régler en position absolute mais sa ne fais pas ce que je veux l'image reste toujours au même endroits :/

---

apparemment j'ai réussit en utilisant la position relative pour les images à rajouter

---

quoi que non en faite c'est pas bon lol c'est mieux mais sa fait pas comme je veux

---

Voici mon code css pour les images, #map c'est pour l'image de la map et les autres c'est pour les images à ajouter

#map{
margin:auto;
width:470px;
height:470px;
background-image:url(images/map.png);
}

#pisteavion{
position:relative;
top:120px;
left:10px;
}

#pisteheli{
position:relative;
top:50px;
left:200px;
}

#tdc{
position:relative;
top:100px;
left:300px;
}

#caserne{
position:relative;
top:0px;
left:100px;
}

Ensuite le code sur la page html

<div id="map">
<div id="pisteavion"></div>
<div id="pisteheli"></div>
<div id="tdc"></div>
<div id="caserne"></div>
</div>

j'aimerais que les images enfin les div puissent ce superposer les un sur les autres mais sa veut pas Oo

[christouphe]

il faut leur mettre un z-index différent sinon elles (les DIV) sont toute dans le même plan Z, un peu comme si tu voulais faire chevaucher 2 planches de bois en fait. Là elles sont "côte-à-côte"

Code :

#map{
margin:auto;
width:470px;
height:470px;
background-image:url(images/map.png);
z-index: 0; //raz-du-sol
}

#pisteavion{
position:relative;
top:120px;
left:10px;
z-index: 1; //un peu au dessus du sol
}

#pisteheli{
position:relative;
top:50px;
left:200px;
z-index: 1;
}

#tdc{
position:relative;
top:100px;
left:300px;
z-index: 1; //je le mets à 1 mais je sais pas ce que c'est.
}

#caserne{
position:relative;
top:0px;
left:100px;
z-index: 1;
}

//Un hélicoptère peu survoler les bâtiments, par exemple...
#helicoptere{
position:relative;
top:0px;
left:100px;
z-index: 2;
}
Ensuite le code sur la page html

<div id="map">
<div id="pisteavion"></div>
<div id="pisteheli"></div>
<div id="tdc"></div>
<div id="caserne"></div>
<div id="helicoptere"></div>
</div>

Un lien utile: http://www.alsacreations.com/astuce/lire...index.html

voilà qui répondra à tes questions :

Un exemple pour la route

Soit le code HTML suivant:


<div id="test1">...</div>
<div id="test2">...</div>
<div id="test3">...</div>
<div id="test4">...</div>

et le code CSS suivant:


div {height: 100px; width: 100px;}
div#test1 {position: absolute; z-index: 4;}
div#test2 {position: absolute; z-index: 2;}
div#test3 {z-index: 10;}
div#test4 {position: relative; z-index: 8;}

Le résultat attendu est le suivant:

* div#test1 sera au premier plan;
* en dessous on aura div#test2;
* en dessous encore on aura div#test3 (qui ne se place pas au-dessus malgré un z-index de 10 car il n'est pas positionné);
* enfin, div#test4 sera le plus haut de la pile, mais ne recouvre pas les autres blocs ici car il est repoussé vers le bas par div#test3 qui n'est pas positionné.

Au final, si tous les blocs ont une couleur de fond opaque, on ne pourra apercevoir que div#test1 en haut et div#test4 plus bas. Les autres blocs sont recouverts par div#test1.

[notalone]

ok ok merci pour cette réponse très constructive je vais tester tout ça et voir de plus près le lien que tu m'as fournis encore merci je vous tiendrai au courant

---

J'ai essayé mais sa fait toujours pareil, il y a que en absolute que les images ce superposent sans problème mais le HIC avec le absolute c'est qu'il prend comme coordonnée 0, 0 le haut gauche de l'écran alors qu'il enfin j'aimerais qu'il prenne celui du div dans lequel il est donc le div "map" :/

[gameprog2]

Franchement c'aurait été mieux qu'il cherche seul sur le web à propose des DIV que vous lui fassiez tout le travail et j'ai rien contre notalone
Je préfère qu'un gars apprenne à pêcher que lui donner un poisson, d'après le viel adage.