Chciałbym stworzyć coś takiego:
Jedna czerwona kratka to jedna pozycja na mapie jakiejs lokacji.
Mam już taki skrypt :
<?php include "config.php"; ?> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> <style> #drag { width: 400px; height: 400px; border: 1px solid #000; margin: 0 auto; position:relative; } .inside { width: 400px; height: 400px; } .drag { background: green; } </style> </head> <body> <a href='map.php?wyspa=1'>Mapa</a> <?php if($_GET['wyspa'] <= 99 && $_GET['wyspa'] > 0) //sprawdzamy czy taka wyspa istnieje { http://www.php.net/echo '<center><h3>Wyspa '.$_GET['wyspa'].' </h3></center>'; //wyświetla na której wyspie jesteśmy http://www.php.net/echo '<div id="drag"><div class="inside drag">'; //pobieramy z css'a wymiary itd. for ($i=0; $i<=24; $i++){ //pętla która liczy współrzędne od 0 do 24 poziomo $x = $i * 20; // liczymy co ile ma się pokazywać współrzędna http://www.php.net/echo "<div style='position:absolute; top: 0px; left ".$x." px; '>$i</div>"; // pokazujemy wsółrzędną } for ($i=0; $i<=24; $i++){ //pętla która liczy współrzędne od 0 do 24 pionowo $x = $i * 20; http://www.php.net/echo "<div style='position:absolute; top: ".$x." px; left:0 px;'>$i</div>"; } $query = 'SELECT * FROM wioski WHERE wyspa= "'.$_GET['wyspa'].'"';VAR_dump($query); $result = mysqli_query($link,$query) or http://www.php.net/die(mysqli_error($link)); //wybieramy tabelę wioski (zakładam że macie inną) i wynik gdzie wyspa jest tą co w get while ($row = mysqli_fetch_array($result)) // robimy pętle która pobierze wszystkie wioski na mapę { $x = $row['x']; // x wiosek $y = $row['y']; // y wiosek $a = $x*20; //tutaj mamy jaką ma mieć wielkość obrazka wioski i ile ma mieć odległość między współrzędnymi np 1 - 2 w moim przypadku 20px $b = $y*20; http://www.php.net/echo "<div style='position:absolute; top:$b px; left:$a px;'><img src='https://help.plemiona.pl/images/2/2f/Schowek1.png'></div>"; //pokazujemy wioski na wyznaczonych współrzędnych } http://www.php.net/echo'</div></div><br>'; // zamykamy tagi html ;) http://www.php.net/echo " <div style='position:absolute; top:160; left:893'> Wyspa (1 - 99):<br> <form action='map.php' method='GET'> <input type='text' name='wyspa' </input><input type='submit' value='Idź'</input> </div>"; //tutaj kod html dzięki czemu gracz będzie łatwo mógł się poruszać po określonych wyspach wpisując jaj numer } else http://www.php.net/echo "<center>Taka wyspa nie istnieje!</center>"; // jeśli taka wyspa nie istnieje dajemy kmunikat ?> </body> </html>
Pierwszy lepszy wynik z Google:
https://stackoverflow.com/questions/27976906/html-css-10x10-div-boxes-with-equal-margin-but-height-is-longer-than-width-for
usunięty margin i masz przykład siatki:
http://jsfiddle.net/0svahfgq/
Ok dzieki, jeszcze jedno.
Kazda plansza jest dostepna w tym momencie jako map.php?wyspa=x (1/2/3/10000)
Jak podrasować to by każda mapa była dostepna z pod index.php / to kwestia ustawien w htaccess?
To żeby zmienił się adres map.php na index.php to kwestia przeniesienia skryptu..
To żeby zmienić wyspa=x na /x to tak, trzeba za pomocą htaccess.
Ostatnia kwestia, jak mozba rozwaizac przesuwanie po mapie?
Mam pomysl taki ze:
- zrobic dodatkowy div (na wierzchu)
- mape dac pod spod
- w js robic coraz to wiekszy margines i wzgledem tego przesuwac, ale co jak dojde do granicy mapy?
czy ten sposob jest wgl ok?
Chodzi o taki efekt tylko nie na mapie google
https://jsfiddle.net/user2314737/06rut61g/
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)