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 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
{
echo '<center><h3>Wyspa '.$_GET['wyspa'].' </h3></center>'; //wyświetla na której wyspie jesteśmy 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
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;
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
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;
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 }
echo'</div></div><br>'; // zamykamy tagi html ;)
<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
echo "<center>Taka wyspa nie istnieje!</center>"; // jeśli taka wyspa nie istnieje dajemy kmunikat ?>
</body>
</html>
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?