Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS][PHP]Mapka
eminiasty
post
Post #1





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

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

Chciałbym stworzyć coś takiego:
(IMG:http://i36.tinypic.com/2mxex3o.png)
(IMG:http://i35.tinypic.com/35n34hx.png)
Jedna czerwona kratka to jedna pozycja na mapie jakiejs lokacji.

Mam już taki skrypt :

[PHP] pobierz, plaintext 
  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>
[PHP] pobierz, plaintext


Obecnie wyglada to tak:

(IMG:https://iv.pl/images/27192584755129719466_thumb.jpg)

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
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
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
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
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
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 04:03
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn