Je vois difficilement comment tu pourrais obtenir une map "réaliste" en utilisant les propriétés CSS.
En effet ce que tu pourrais faire serait de générer ta map sous forme d'éléments <span id="nom_pays"><span id="pays_faction"></span></span>.
Dans la CSS tu aurais alors quelque chose du genre :
Les spans avec les id #nom_pays servent à placer l'image de base du pays.
Les spans avec les id #pays_faction servent à placer en superposition (c'est le rôle du z-index) une image sur laquelle est dessinée la bordure du pays de la couleur de la faction. Cela veut dire qu'une image bordure_pays_faction.png (sauf la bordure elle-même bien entendu) doit être transparente pour que l'image du pays apparaisse en dessous de celle-ci. Bien sûr ça demande toujours pas mal d'images différentes, mais une fois que tu as l'image d'un pays, en obtenir la bordure ne doit pas être compliqué.
Le problème de cette méthode, c'est que quoique tu fasses, les <span> resteront toujours d'ennuyeux rectangles. Si tu dessines un seul pays à la fois ce n'est pas un problème (tu définis un fond transparent au span et à l'image de ton pays), mais pour connecter plusieurs pays entre eux c'est plus embêtant.
Je ne m'en suis jamais beaucoup servi moi-même, mais j'ai bien l'impression que GD est ta meilleure chance (ah et flash aussi surement, mais alors là j'y connais absolument rien).
En effet ce que tu pourrais faire serait de générer ta map sous forme d'éléments <span id="nom_pays"><span id="pays_faction"></span></span>.
Dans la CSS tu aurais alors quelque chose du genre :
Code :
// A définir pour chaque pays
#nom_pays{
background: url("image_du_pays") no-repeat;
width: largeur_image;
height: hauteur_image;
z-index: 1;
}
// A définir pour chaque faction et chaque pays
#pays_faction{
background: url("bordure_pays_faction.png") no-repeat;
z-index: 2;
}Les spans avec les id #nom_pays servent à placer l'image de base du pays.
Les spans avec les id #pays_faction servent à placer en superposition (c'est le rôle du z-index) une image sur laquelle est dessinée la bordure du pays de la couleur de la faction. Cela veut dire qu'une image bordure_pays_faction.png (sauf la bordure elle-même bien entendu) doit être transparente pour que l'image du pays apparaisse en dessous de celle-ci. Bien sûr ça demande toujours pas mal d'images différentes, mais une fois que tu as l'image d'un pays, en obtenir la bordure ne doit pas être compliqué.
Le problème de cette méthode, c'est que quoique tu fasses, les <span> resteront toujours d'ennuyeux rectangles. Si tu dessines un seul pays à la fois ce n'est pas un problème (tu définis un fond transparent au span et à l'image de ton pays), mais pour connecter plusieurs pays entre eux c'est plus embêtant.
Je ne m'en suis jamais beaucoup servi moi-même, mais j'ai bien l'impression que GD est ta meilleure chance (ah et flash aussi surement, mais alors là j'y connais absolument rien).