JeuWeb - Crée ton jeu par navigateur
[PHP/JS/CSS]Cartographie - Version imprimable

+- 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 : [PHP/JS/CSS]Cartographie (/showthread.php?tid=4722)

[PHP/JS/CSS]Cartographie - atra27 - 09-04-2010

Bon voila pour faire simple, j'ai en bdd les positions de différentes planetes suivant x et y.

J'aimerais juste avoir sur une page une représentation graphique de ce que sa donne....
J'avais pensé a transmettre aux css les coordonnées grâce a php mais je sais pas vraiment comment faire....

Je maitrise pas l'histoire des positions "absolutes" et tout sa...

En gros dans l'idéal, il me faudrait en html un repére orthonormé avec la position 0;0 au centre d'une celle d'un tableau (width et height a mettons 500px) et donc la possibilité de placer des div suivants les coordonnées (Div qui me sert ensuite a placer les appels js des popups d'info et les images correspondant aux bases)

Mtn si c'est bien plus simple, on peut bouger le repère de manière a ce que le 0;0 soit en haut a gauche, et donc on n'a plus que des positions positives et qui sont plus proches du positionnement dans les navigateurs...


Des idées sur comment réaliser ça?
Un bout de script même? (suis pas callé css et limite niveau js...)

RE: [PHP/JS/CSS]Cartographie - Daynos - 09-04-2010

Pour faire simple, il faut pour commencer un "cadre" avec l'attribut "position:relative". Tous les calques avec la propriété "position:absolute" situés à l'intérieur de ce "cadre" auront pour référentiel l'angle haut gauche du cadre. Après le cadre, tu peux le mettre où tu veux dans ta page, les calques à l'intérieur suivront.

Petit exemple très basique pour tracer une diagonale de tuiles grises sur un cadre de fond bleu :

Code PHP :
<?php 

<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Document sans nom</title>

<style type="text/css">

#cadre { position:relative; width:100px; height:100px; margin:150px; border:1px solid #000; background:#66CCFF; }

.tuile    { position:absolute; width:10px; height:10px; background:#CCC; }

#tuile1 { top:0px; left:0px; }

#tuile2 { top:10px; left:10px; }

#tuile3 { top:20px; left:20px; }

#tuile4 { top:30px; left:30px; }

#tuile5 { top:40px; left:40px; }

#tuile6 { top:50px; left:50px; }

#tuile7 { top:60px; left:60px; }

#tuile8 { top:70px; left:70px; }

#tuile9 { top:80px; left:80px; }

#tuile10 { top:90px; left:90px; }

</style>

</head>



<body>

    <div id="cadre">

        <div id="tuile1" class="tuile"></div>

        <div id="tuile2" class="tuile"></div>

        <div id="tuile3" class="tuile"></div>

        <div id="tuile4" class="tuile"></div>

        <div id="tuile5" class="tuile"></div>

        <div id="tuile6" class="tuile"></div>

        <div id="tuile7" class="tuile"></div>

        <div id="tuile8" class="tuile"></div>

        <div id="tuile9" class="tuile"></div>

        <div id="tuile10" class="tuile"></div>

    </div>

</body>

</html>

Donc pour "centrer" et avoir des coordonnées "négatives", il vaut mieux faire une correspondance toute simple du type : position_css = position_reelle + (taille_carte/2). Le CSS gère les coordonnées absolue négative, mais par expérience, il vaut mieux avoir tout en positif. Plus simple d'ajouter une demi-carte à des coordonnées via PHP que de résoudre des problèmes de placement en CSS Big Grin

RE: [PHP/JS/CSS]Cartographie - atra27 - 15-04-2010

ça fonctionne!

Juste eu a l'adapter un peu mais jdois avouer que c'est du beau boulot!
Merci Wink