1:
<html>
2:
<head>
3:
<link rel="stylesheet" type="text/css" href="style.css" />
4:
<script type="text/javascript">
5:
function add() {
6:
//Här så genererar vi fram bilderna på samma sätt som man gör i PHP (på ett ungefär)
7:
//Kort och gott så loopar vi 10 gånger
8:
//Varje loop skapar en div med ett nummer och lägger till denna div till imagecontainer
9:
//Imagecontainer är bara en "behållare". I detta exempel så är den färgad ljusgrå för att man ska se den, men det den kan vara osynlig också.
10:
//Imagecontainers enda funktion är att sätta en "ram" som bestämmer hur imageboxarna ska bete sig när float:left är aktivt. Tar man bort float:left så får man icke önskvärt resultat.
11:
12:
//Testa att ändra lite av följande egenskaper i css:en så får du en förståelse hur det hänger ihop:
13:
//float:left på imagebox
14:
//Storleken på imagecontainer
15:
//Storleken på imagebox
16:
for (var i = 1; i < 11; i++)
17:
{
18:
var imageBox = document.createElement("div");
19:
imageBox.setAttribute("class","imagebox");
20:
imageBox.innerHTML = i;
21:
document.getElementById("imagecontainer").appendChild(imageBox);
22:
}
23:
}</script>
24:
25:
</head>
26:
<body onload="add()">
27:
28:
29:
<?php
30:
31:
32:
33:
34:
include "conn.php";
35:
36:
// byt platsId till vad det nu heter i dina tabeller
37:
$query = "SELECT p.status, b.namn FROM platser AS p LEFT JOIN bokningar AS b ON p.plats = b.plats";
38:
$result = mysql_query($query) or die(mysql_error());
39:
40:
while ($row = mysql_fetch_assoc($result))
41:
{
42:
//dom bokade
43:
if ($row['status'] == "1")
44:
{
45:
46:
echo "<div id='imagecontainer'>";
47:
48:
echo "<img class='imageBox' src='images/upptagen.png' style='margin-left: 10px; margin-right: 10px; margin-top: 10px;' border='1' title='bokad av ".$row['namn']."'> ";
49:
50:
echo "</div>";
51:
echo "</body>";
52:
}
53:
else
54:
{
55:
56:
echo "<div id='imagecontainer'>";
57:
58:
echo "<img class='imageBox' src='images/ledig.png' title='ledig' style='margin-left: 10px; margin-right: 10px; margin-top: 10px;' border='1'>";
59:
60:
echo "</div>";
61:
62:
}
63:
}
64:
65:
66:
?>
67:
</body>
68:
</html>
69:
