+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Une carte en image dynamique (/showthread.php?tid=5155)
RE: Une carte en image dynamique - notalone - 06-09-2010
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.
RE: Une carte en image dynamique - atra27 - 06-09-2010
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 :$)
RE: Une carte en image dynamique - gameprog2 - 06-09-2010
Plusieurs t'ont conseillé de bucher les DIV, alors tu trouvera la réponse à ta dernière question ainsi, Google est ton ami
RE: Une carte en image dynamique - notalone - 06-09-2010
lol gameprog2 je suis bien placé pour savoir que google est notre ami ^^ mais étant là j'ai voulus poser la question
RE: Une carte en image dynamique - notalone - 06-09-2010
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:/
RE: Une carte en image dynamique - php_addict - 07-09-2010
(06-09-2010, 11:17 PM)notalone a écrit : 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)
RE: Une carte en image dynamique - notalone - 07-09-2010
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
RE: Une carte en image dynamique - christouphe - 07-09-2010
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/84-comment-fonctionne-la-proprit-css-z-index.html
voilà qui répondra à tes questions :
Citation :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.
RE: Une carte en image dynamique - notalone - 07-09-2010
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" :/
RE: Une carte en image dynamique - gameprog2 - 07-09-2010
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.