Untitled

<?php
session_start();

if(!isset($_SESSION['online'])){
    header('Location: index.php');
    exit();
}

if(isset($_GET["id"]))              // sprawdza czy jest ustawiona zmienna id
{
    $img_id =($_GET["id"]);         // jeżeli jest ustawiona to przypisuje jej wartość zmiennej img_id
}else
{
    $img_id = 1;                    // jeżeli nie jest ustawiona to przypisuje jej wartość 1 czyli wywołuje na stronie pierwszy obrazek
}
$db = mysqli_connect("localhost","root","");        //połączenie z bazą danych
mysqli_select_db($db, "mapa");                      // wybiera bazę danych o nazwie mapa
$zapytanie = mysqli_query($db, "SELECT plik FROM obrazki WHERE id_obrazka = $img_id");  //zwraca jakąś nieznaną ilość rekordów w zmiennej $zapytanie znajduje się wynik wykonanego zapytania
$rezultat = mysqli_fetch_assoc($zapytanie);     //  pobiera z $zapytanie kolejny rekord i zapisuje go do tablicy asocjacyjnej
$obraz = $rezultat["plik"];
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<title> Wykorzystywanie map obrazu</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script>
pins = ["obrazki/pinezka1.png", "obrazki/pinezka2.png", "obrazki/pinezka3.png", "obrazki/pinezka4.png", "obrazki/pinezka5.png", "obrazki/pinezka6.png",
"obrazki/pinezka7.png", "obrazki/pinezka8.png", "obrazki/pinezka9.png"];
function wyswietl(x,y,desc){
    var pin = document.createElement('div');
    pin.className = "pin";
    pin.style.top = y-24 + "px";
    pin.style.left = x-12 + "px";
    pin.style.backgroundImage = "url('" + pins[Math.floor(Math.random()*pins.length)] + "')";
    pin.addEventListener("click",function(){
        var newdesc = prompt("Podaj nowy opis");
        if(newdesc != null && newdesc != "")
            this.firstChild.innerHTML = newdesc;
    });
    var descbox = document.createElement("div");
    descbox.innerHTML = desc;
    pin.appendChild(descbox);
    document.getElementById("uchwyt").appendChild(pin);
}

function dodaj(e){
    var desc = prompt("Proszę podać opis");
    if(desc!= null && desc != ""){
        wyswietl(e.offsetX,e.offsetY,desc);
        //trzeba sprawdzic czy uzytkownik wpisal w opis znak &, załóżmy że nie wpisał
        var http = new XMLHttpRequest();
        var params = "img=<?php echo $img_id; ?>&x=" + e.offsetX + "&y=" + e.offsetY + "&opis=" + desc;
        http.open("POST", "add.php", true);
        http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        http.send(params);
    }
}

function przycisk(){
    <?php
    $zapytanie = mysqli_query($db, "SELECT x,y,opis FROM pinezki WHERE id_obrazka = $img_id");  // Zapytanie mysql zwraca nieznaną ilość rekordów
    while($pin = mysqli_fetch_assoc($zapytanie)){       // w zmiennej $zapytanie znajduje się wynik wcześniej wykonanego polecenia, mysqli_fetch_assoc($zapytanie ) pobiera z $zapytanie kolejny rekord i zapisuje go do tablicy asocjacyjnej
        echo "wyswietl(".$pin["x"].",".$pin["y"].",\"".$pin["opis"]."\");";     // jeśli wszystkie rekordy już zostały pobrane, to mysqli_fetch_assoc zwróci fałsz, a ponieważ nie mamy pewności co do ilości rekordów to musimy użyć pętli
    }
    ?>
}

</script>
<style>
body {
    text-align: center;
    background-color: #222;
    height:100%;
}
h1{
    color:white;
}
.pin {
    position: absolute;
    cursor: pointer;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
}
.pin>div {
    display: none;
    position: absolute;
    top: 2px;
    left: 27px;
    color: #ddd;
    background-color: rgba(0,0,0,0.8);
    padding: 3px;
    text-align: left;
    width: 200px;
}
.pin:hover>div {
    display: block;
}
.pudelko {
    display: inline-block;
    padding: 20px;
    font: 8pt Verdana;
    background-color: #ddd;
    margin-top:50px;
}
.miniatura {
    height: 120px;
    border: 1px solid black;
    margin: 5px;
}
#uchwyt {
    position: relative;
}
#image {
    position: relative;
    cursor: crosshair;
    margin-bottom: 20px;
}
.menu{
    width:100px;
    background-color:#9ce;
    font-size:11pt;
    color:black;
    font-weight:bold; /*pogrubienie */
    height:48px;
    overflow:hidden; /* przepełnienie ukryte aby nie było widać listy */
    text-align:center;
    float:left;
    margin-top:10px;

}
.menu:hover{
    width:100px;
    background-color:#27c;
    font-size:10pt;
    color:black;
    height:auto;
    text-align:center;
}
#linki{
    list-style-type:none;
    width:100px;
    font-size:9pt;
    padding:0px;
    margin:0px;
    z-index:1;
    position:absolute;
}
#linki li{
    margin:10px 0px; /* marginesy między wierszami ustawione na 10px */
    display: block;
}
#linki a, #linki a:visited{
    text-decoration:none;
    display:block;
    width:100px;
    background-color:#E2E2E2;
    padding: 2px 0px;
    color:green;
}
#linki a:hover{
    text-decoration:none;
    width:100px;
    color:white;
    font-weight:bold;
    font-size:12pt;
    padding:0px;
    border-top:solid 2px purple; /*na dole i gorze hiperlacza pojawi sie obramowanie w kolorze fioletowym */
    border-bottom:solid 2px purple;
    margin: 1px 0px;
    background-color:#28e;
}
ul
{
    display: none;
}

.menu:hover ul {
    display: block;
}
.exit{
    float:left;
    margin-left: 1300px;
    text-align:center;
}
.exit img{
    width:60px;
    heigth:60px;
}
</style>
</head>
<body onload="przycisk()">
<h1>Wykorzystywanie map obrazu</h1>
<div class="menu">
        <p>KATALOG</p>
<ul id="linki">
    <div class="menu1">
        <li><a href="#">Rok 2016 </a></li>
        <li><a href="#">Rok 2015 </a></li>
        <li><a href="#">Rok 2014 </a></li>
        <li><a href="#">Rok 2013 </a></li>
        <li><a href="#">Rok 2012 </a></li>
        <li><a href="#">Rok 2011 </a></li>
    </div>
</ul>
</div>
    <div class="exit">
        <a href="logout.php"><img src="obrazki/Wyloguj.png"/></a>
    </div>
<div class="pudelko">
    <div id="uchwyt">
            <img id="image" src="<?php echo $obraz; ?>" alt="Obraz" onclick="dodaj(event)">
        </br>
        Kliknij w dowolnym miejscu mapy obrazu. Kliknij pinezkę, aby ją edytować.
    </div>
</div>
<div style="clear:both; height: 30px"></div>
<div class="pudelko" style="padding: 5px">
    <?php
    $zapytanie = mysqli_query($db, "SELECT * FROM obrazki WHERE id_obrazka != $img_id");
    while($obraz = mysqli_fetch_assoc($zapytanie)){
        echo '<a href="?id='.$obraz["id_obrazka"].'"><img class="miniatura" src="'.$obraz["plik"].'" alt="'.$obraz["nazwa"].'"></a>';
    }
    ?>
</div>
</body>
</html>