Disposition des tuiles hexagonales sur une carte

[Sephi-Chan]

Owned by SNCF (et c'est un fils de cheminot qui te le dit) !

Sinon, je suis pas avare en tests, généralement. J'ai d'ailleurs pu tester l'assemblage de tuiles en une seule image. Le positionnement est fait grâce à background-position, ensuite. Cela permet de limiter les requête HTTP envoyées au serveur. Le but est d'utiliser ce procédé pour regrouper tous les ensembles de tuiles.



Voilà ce que donne le positionnement :

Code :

.cloud {
    background            : url('Tiles 2/clouds.png') 0 0;
    width                : 120px;
    height                : 60px;
    position            : absolute;
    top                    : -60px;
    left                : 0;
}

.cloud2 {
    background            : url('Tiles 2/clouds.png') 200px 0;
    width                : 120px;
    height                : 60px;
    position            : absolute;
    top                    : -64px;
    left                : -10px;
}

.cloud3 {
    background            : url('Tiles 2/clouds.png') 0 200px;
    width                : 138px;
    height                : 60px;
    position            : absolute;
    top                    : -50px;
    left                : -15px;
}

Sephi-Chan