Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [HTML][CSS][PHP]Mapka
eminiasty
post 4.01.2019, 22:03:11
Post #1





Grupa: Zarejestrowani
Postów: 267
Pomógł: 0
Dołączył: 11.09.2015

Ostrzeżenie: (0%)
-----


Chciałbym stworzyć coś takiego:


Jedna czerwona kratka to jedna pozycja na mapie jakiejs lokacji.

Mam już taki skrypt :

  1. <?php include "config.php"; ?>
  2.  
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <meta charset="UTF-8">
  7. <title>Title of the document</title>
  8. <style>
  9. #drag {
  10. width: 400px;
  11. height: 400px;
  12. border: 1px solid #000;
  13. margin: 0 auto;
  14. position:relative;
  15. }
  16.  
  17. .inside {
  18. width: 400px;
  19. height: 400px;
  20. }
  21.  
  22. .drag {
  23. background: green;
  24. }
  25. </style>
  26. </head>
  27.  
  28. <body>
  29. <a href='map.php?wyspa=1'>Mapa</a>
  30. <?php
  31. if($_GET['wyspa'] <= 99 && $_GET['wyspa'] > 0) //sprawdzamy czy taka wyspa istnieje
  32. {
  33.  
  34. echo '<center><h3>Wyspa '.$_GET['wyspa'].' </h3></center>'; //wyświetla na której wyspie jesteśmy
  35. echo '<div id="drag"><div class="inside drag">'; //pobieramy z css'a wymiary itd.
  36.  
  37. for ($i=0; $i<=24; $i++){ //pętla która liczy współrzędne od 0 do 24 poziomo
  38. $x = $i * 20; // liczymy co ile ma się pokazywać współrzędna
  39. echo "<div style='position:absolute; top: 0px; left ".$x." px; '>$i</div>"; // pokazujemy wsółrzędną
  40. }
  41.  
  42. for ($i=0; $i<=24; $i++){ //pętla która liczy współrzędne od 0 do 24 pionowo
  43. $x = $i * 20;
  44. echo "<div style='position:absolute; top: ".$x." px; left:0 px;'>$i</div>";
  45. }
  46.  
  47.  
  48. $query = 'SELECT * FROM wioski WHERE wyspa= "'.$_GET['wyspa'].'"';VAR_dump($query);
  49. $result = mysqli_query($link,$query) or die(mysqli_error($link));
  50. //wybieramy tabelę wioski (zakładam że macie inną) i wynik gdzie wyspa jest tą co w get
  51.  
  52.  
  53. while ($row = mysqli_fetch_array($result)) // robimy pętle która pobierze wszystkie wioski na mapę
  54. {
  55. $x = $row['x']; // x wiosek
  56. $y = $row['y']; // y wiosek
  57.  
  58.  
  59. $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
  60. $b = $y*20;
  61. 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
  62. }
  63. echo'</div></div><br>'; // zamykamy tagi html ;)
  64.  
  65. echo "
  66. <div style='position:absolute; top:160; left:893'>
  67. Wyspa (1 - 99):<br>
  68. <form action='map.php' method='GET'>
  69. <input type='text' name='wyspa' </input><input type='submit' value='Idź'</input>
  70. </div>"; //tutaj kod html dzięki czemu gracz będzie łatwo mógł się poruszać po określonych wyspach wpisując jaj numer
  71.  
  72. }
  73. else
  74. echo "<center>Taka wyspa nie istnieje!</center>"; // jeśli taka wyspa nie istnieje dajemy kmunikat
  75. ?>
  76. </body>
  77.  
  78. </html>


Obecnie wyglada to tak:



Mam problem z odstepami pomiedzy poszczegolnymi lokacjami i numerowaniem. Wszystko nachodzi na siebie.
Proszę o pomoc tej kwestii.
Co zrobić by wygladalo to jak w pierwszej wersji?
Go to the top of the page
+Quote Post
markonix
post 4.01.2019, 23:12:02
Post #2





Grupa: Zarejestrowani
Postów: 2 707
Pomógł: 290
Dołączył: 16.12.2008
Skąd: Śląsk

Ostrzeżenie: (0%)
-----


Pierwszy lepszy wynik z Google:
https://stackoverflow.com/questions/2797690...-than-width-for
usunięty margin i masz przykład siatki:
http://jsfiddle.net/0svahfgq/


--------------------
Go to the top of the page
+Quote Post
eminiasty
post 5.01.2019, 00:06:40
Post #3





Grupa: Zarejestrowani
Postów: 267
Pomógł: 0
Dołączył: 11.09.2015

Ostrzeżenie: (0%)
-----


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?
Go to the top of the page
+Quote Post
markonix
post 5.01.2019, 01:18:54
Post #4





Grupa: Zarejestrowani
Postów: 2 707
Pomógł: 290
Dołączył: 16.12.2008
Skąd: Śląsk

Ostrzeżenie: (0%)
-----


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.


--------------------
Go to the top of the page
+Quote Post
eminiasty
post 5.01.2019, 10:18:24
Post #5





Grupa: Zarejestrowani
Postów: 267
Pomógł: 0
Dołączył: 11.09.2015

Ostrzeżenie: (0%)
-----


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/

Ten post edytował eminiasty 5.01.2019, 10:20:54
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 19:55