Witam,
ostatnio mnie zaciekawiło jak zrobić mapkę na styl tej która jest w grze plemiona.
Wpadłem na pomysł.
Użyć w HTMLu <MAP>, ale w map area wyświetla tylko odnośnik. I mam pytanie jak zrobić żeby był wyświetlany obrazek np budynku.
mapa ma np rozmiary 500x500, jeden budynek to np 50x50. mapa podzielona jest na 10 pól w pionie i poziomie:

Czyli jeśli user ma budynek na pozycji 4:3 to powinien pojawić się budynek

1 kratka to 50x50px.

Mam coś takiego:

[PHP] pobierz, plaintext 
<?php
$cityX = '0'; //pozycja gorna (kratka)
$cityY = '0'; //pozycja boczna (kratka)
 
 
$a = $cityX*50;
$b = $cityY*50;
$c = $a+50;
$d = $b+50;
 
echo '<img src="tlo.png" width="500" height="500" alt="mapa" title="mapa" usemap="#mapa">
<map name="mapa" id="mapa">
<area shape="rect" alt="a" title="a" coords="'.$a.', '.$b.', '.$c.', '.$d.'" href="#">
</map>';
 
?>
[PHP] pobierz, plaintext 

I jak zrobić żeby wyświetlało budynek a nie odnośnik?

Może macie inne pomysły jak to wykonać?

Czy mapa jest tu konieczna? Nie wystarczy 100 div'ów, bądź tabelka? Ostylować tabelę, lub divy chyba będziesz potrafił...

dajesz ziemie mapy jako tło diva + tablica 2 wymiarowa z położeniem miast + zakładasz co ile px ma być nowe pole
gdy ładujesz mapę dajesz 2 zmienne x,y z początkowym położeniem planszy (widocznym) i sprawdzasz co z tablicy jest w przedziale +-5-10 pól czyli w widocznym polu, potem tylko wstawiasz tam img , przesuwanie mapy robisz skokowe co x pól aby łatwo było wyliczać.



@Vokiel -> a przewijanie mapki?

[HTML] pobierz, plaintext 
<area shape="rect" alt="a" title="a" coords="'.$a.', '.$b.', '.$c.', '.$d.'" href="#" style="background-image: url('adres_do_obrazka');" />
[HTML] pobierz, plaintext 

Jakiś adres musi być (podgląd wioski, czy jakieś opcje szpiegowania czy cuś ).

O ile dobrze rozumiem mamy 100 pól, które są niepodzielne.
Zatem tworzenie tej mapki może odbywać się w obojętnie jaki sposób, czy to będą mapy, divy, tabele, czy canvas.
Przesuwanie mapy skutkuje "przeliczeniem" pozycji elementów. W przypadku przesuwania w jedną stronę elementy przesuwane są po jednej osi i przy jednostkowym przesunięciu (o pole) ukrywamy 10 kwadracików, a pokazujemy 10 nowych.

Jeśli cały obszar ma być dużo większy, a widoczny jest tylko jego wycinek. To można nawet utworzyć mapkę dla całego obszaru, następnie doczytywać aktywne elementy. Złączyć to z scroll-to, dynamicznym pobieraniem elementów widocznych na danym ekranie, to nawet będzie ładnie i szybko działać

hmm... no właśnie że ze stylami to nie działa. tylko inline czy jakoś tak.

hmm... z tymi divami i tabelami nie jest zły pomysł. Mapa będzie miała ~9000x9000px, a wyświetlane będzie tylko 10x10kratek

Jest to zrobione identycznie jak w google maps. Masz kwadraty o odpowiedniej wielkości ułożone obok siebie przesuwanie to tylko zwracanie do serwera pozycji środka, która to sprawdza jakie "kwadraty" są widoczne i w razie czego dosyła kolejne bądź aktualizuje ich wygląd jeśli zaszły zmiany. Szczerze mówiąc budynk czy cokolwiek może być jak marker, czyli ma wyświetlanie na dowolnej współrzędnej. Zapewne jednak nawet to jest uproszczone w dużym stopniu. Pewnie masz duży świat i każdy kwadrat jest numerowany, a funkcja wstawia akurat te widoczne. Do tego jeśli na jakimś znajduje się budynek czy cokolwiek, to owo pole zostaje ujęte jako klikalny link.A że te są jako inline to nie robi to żadnej różnicy. To po prostu w takim wypadku dużo znaczników img z padding 0, margin 0, float left i paroma innymi wpisami w css, a gdzieniegdzie img jest objęte przez A, co ostatecznie tworzy zgrabną mapkę z klikalnymi linkami. Można więc ująć, że jest to:

[HTML] pobierz, plaintext 
<div id='mapka'>
<img src="/mapa/105.jpg" />
<img src="/mapa/106.jpg" />
<img src="/mapa/107.jpg" />
<img src="/mapa/108.jpg" />
<img src="/mapa/109.jpg" />
<img src="/mapa/110.jpg" />
<img src="/mapa/205.jpg" />
<a href="karczma.php" title="Karczma"><img src="/mapa/karczma.jpg" /></a>
<img src="/mapa/207.jpg" />
<img src="/mapa/208.jpg" />
<img src="/mapa/209.jpg" />
<img src="/mapa/210.jpg" />
</div>
[HTML] pobierz, plaintext 

Jako że budynki są zawsze w tym samym miejscu to nawet nie trzeba przezroczystego img na innego nakładać. Wystarczy tam gotowca wstawć, bo zgra się z resztą. reszta to tylko ostylowanie. ważne by całość została tak dobrana, by div zawierający fragmenty miał odpowiednią szerokość, która pozwala na swobodne przepłynięcie elementów img wewnątrz i wtedy nie trzeba się o nic martwić. samo się stawi wszystko.