[RESOLU]Comment positionner sur une grande map

[Air]

Bonjour,

J'ai une grosse carte de 5000 pixels sur 5000.  Mes cases sont sur 20 pixels sur 20 pixels. cette carte est une image jpg en background
Je ne sais pas comment me positionner à un endroit précis de la carte. Par exemple,  aux coordonnées 2500- 2500

Code :

<div id="map" data-begin-x-position="198" data-begin-y-position="116" data-related-place="16930" data-map-size="5000" data-map-ratio="20" style="width: 5000px; height: 5000px;">
<div id="background"></div>
</div>

(Edit Xenos: mets tes codes entre les balises phpBB du même nom; je n'éditerai pas chaque message pour corriger ça!)

J'ai essayé les liens href interne en insérant d'autres image dans ma map. cela fonctionne mais le résultat n'est pas terrible.

Auriez-vous une autre méthode ?

[Xenos]

Salut,

je ne suis pas certain de comprendre la problématique exacte... si tu as une image de la carte à placer en background d'un élément HTML, utilise simplement "background-image: url()" et eventuellement ses dérivés (background-repeat: no-repeat; background-position: center center; background-size: 100% 100% ou cover). Et pour te placer dessus, tu fixes le ratio de ta carte (1:1), tu fixes la taille du conteneur en conséquence (même width & height, peut importe leur valeur) et tu utilises du % (top/left/right/bottom) pour te positionner dessus.

Mais si tu as une carte composée de cases d'environ 20x20 pour un total de 250*250 cases, alors mieux vaut simplement faire des éléments DOM (une table HTML si les cases sont nécessairement carrées, ou une carte SVG façon https://isometry.reinom.com ) et poser une texture dessus en arrière-plan (note que sur le SVG d'Isometry, j'ai aligné les background les uns avec les autres: on ne voit donc pas de cassure de texture à la frontière entre des cases contigües).
Le positionnement sera alors simplement la réponse à la question "sur quelle case suis-je?", dont tu as certainement la réponse en BDD (ou dans ton modèle de manière générale).

PS: et avec les @media queries et la fonction CSS calc(), tu peux sans problème fixer le ratio d'un élément HTML

Code :

.scene {
    height: calc(100vw / (16 / 9));
    width: 100vw;
}

@media (min-aspect-ratio: 16/9) {
    .scene {
        left: calc(50vw - (100vh * (16 / 9)) / 2);
        margin: 0 auto;
        height: 100vh;
        width: calc(100vh * (16 / 9));
    }
}

J'utilise cette méthode pour des points-n-clicks que je suis en train de finaliser en cette belle-journée-qu'il-fait-si-beau-qu'on-irait-bien-dehors-mais-faut-pas-déconner-quand-même

[Air]

Merci pour l'édit du post en y ajoutant la balise qui va bien

Code :

<div id="map" data-begin-x-position="198" data-begin-y-position="116" data-related-place="16930" data-map-size="5000" data-map-ratio="20" style="width: 5000px; height: 5000px;">
<div id="background"></div>
</div>

(Edit Xenos: mets tes codes entre les balises phpBB du même nom; je n'éditerai pas chaque message pour corriger ça!)

Je ne suis pas encore parvenu à un résultat satisfaisant.
Mais ça m'a permis de voir qu'il y avait des sujets similaires :
http://www.jeuweb.org/showthread.php?tid=5831
http://www.jeuweb.org/showthread.php?tid=9201

Je vais reprendre ces posts et + ta réponse, je pense pouvoir m'en sortir.

En tout cas encore merci.

[Air]

Je vais utiliser la fonction js window.scrollTo(x,y) dans mon body au chargement de la page. ça réponds à mon besoin.

Merci.