Sitzplan Information gestalten.

123123123

123123123

Erfahrenes Mitglied
Hallo, Leute! :)

Meine Frage ist: Wie kann ich mit Javascript so ein Sitzplan gestalten, in dem ich beim Klicken auf einzelne Sitze (zB Sitz 20) die Information über diesen Sitz bekommen, wie zB welche Reihe, welcher Block und auch Preis!!

Danke für die Hilfe! :)
 
Die Frage ist doch wie sieht der Sitzplan überhaupt aus. Sind es alles einzelne Bilder oder ist es ein ImageMap oder, oder, oder.

Was dann auch noch wichtig zu wissen ist, wo kommen die Informationen her die angezeigt werden sollen?
 
Also ich habe einen Sitzplan wo nur die Zahlen in Kästchen stehen, ich muss nur die Zahlen drücken um dann die Infos zu bekommen.

Ich habe eine Datenbank dafür erstellt, da steht auch alles, aber kann man das nicht selber irg.wie gestalten. Denn die Daten, die in der Datenbank stehen sind zu ausführlich! Ich will aber versuchen die selber zu schreiben.
Also zB: Sitz 20=> Block:links, Kategorie:2, Preis:20 €, usw.
 
Wie soll man dir denn helfen ohne Code?
Wie sieht's mit dem HTML Code aus?

Hier mal 2 schnelle Lösungsmöglichkeiten:

1. Möglichkeit(Ajax):
Ich würde zu jeder Zahl ein Link machen mit einem Atrribut id und Class und diese auf eine JavaScript Funktion übergeben.
Dann könnte man per Ajax einen Request an ein Script machen.
Das gibt die Daten per JSON zurück und das parst man dann wieder in Array.
Das ganze dann halt irgendwo beispielsweise in einem Popup oder was auch immer ausgeben.

2. Möglichkeit(Multidimensionales Array):
Auch wieder ein Link mit der id und class auf eine JavaScript Funktion geben.
Das Array nach der entsprechenden id ausgeben.
Die Daten dann halt wieder irgendwie ausgeben.


Möglichkeit 1 würde halt immer ein kurzen Moment zum Laden der Daten dauern, dafür ist es aber aktueller(falls sich die Werte mal verändern) als Möglichkeit 2.
Möglichkeit 2 währe halt wiegesagt gleich in einem Array in JavaScript hinterlegt.
Es gibt bestimmt noch mehr Möglichkeiten, aber diese sind mir gerade auf die schnelle eingefallen.

Ich hoffe, ich konnte es einigermaßen erklären.
Bei Fragen einfach wieder melden.
 
Also ich hab zwei PHP-codes:
In dem Ersten stehen die ganzen Infos, also Sitz, Reihe usw.
PHP: 
<?php
include("class_db.php");

$planID = 1;

$db = new DB("localhost", "", "", "plaene");
$db->query("TRUNCATE TABLE sitzplan_{$planID}");


for($row=1; $row<=6; $row++)
{
	$x = (($row-1) * 20);
	setRow($x+20, $x+11, $row, "Rechts", 2);		setRow($x+10, $x+1, $row, "Links", 1);
}

function setRow($von, $bis, $reihe, $block, $kategorie)
{
	global $db, $planID;
	for($i=$von; $i>=$bis; $i--)
	{
		$db->query("INSERT INTO sitzplan_{$planID} SET
					sitz = '{$i}',
					reihe = '{$reihe}',
					block = '{$block}',
					kategorie = '{$kategorie}'");
	}
}
?>

Und in dem zweiten PHP-Code ist halt die Gestaltung von diesem Sitzplan:
PHP: 
<?php
include("class_db.php");

$planID = 1;

$db = new DB("localhost", "", "", "plaene");

$plandaten = $db->getQueryData("SELECT * FROM sitzplan_{$planID}");
p($plandaten);
?>
<html>
	<head>
		<title>Sitzplan <?php echo $planID?></title>
		<style>
			.buehne {
				border : 5px solid black;     
				width: 600px;
				height:  200px;
				margin: 0px auto;
				background-color:#D3D3D3;
			}
			h1 { 
				text-align:center;
				font-size:40px;
				margin-top: 70px ;
			}
			.plan {
				border-collapse: collapse;
				border-style: double;
				border-width: 5px;
				text-align: center;
				margin: 20px auto;
			}
			.row {
				border: dashed;
				font-weight: bold;
				background-color:yellow;
				height:50px;
				width:50px;
			}
			.sitz {
				width:40px;
				height:40px;
				border: 1px solid black;
				cursor: pointer;
			}
			.cat1 {
				background-color: red;
			}
			.cat2 {
				background-color: green;
			}
		</style>
	</head>
<body>

	<div class = "buehne">
		<h1>Bühne</h1>
	</div>
	
	<table class="plan" id="plan">
		<?php
			$i=0;
			for($row=1; $row<=6; $row++)
			{
				echo "<tr>";
					echo "<td class='row'>{$row}</td>";
					for($seat=20; $seat>=1; $seat--)
					{
						$sitzdaten = $plandaten[$i];
						
						echo "<td class='sitz cat{$sitzdaten['kategorie']}'>{$sitzdaten['sitz']}</td>";
						$i++;
					}
					echo "<td class='row'>{$row}</td>";
				echo "</tr>";
			}
		?>
	</table>
	
	<script>
		var plan = document.getElementById("plan");
	</script>
</body>
</html>


So unten hab ich schon mal mit javascript angefangen, aber weiß nicht weiter.
 
Zuletzt bearbeitet:
Erstelle dir doch einfach einen Container mit DIV, blende ihn mit Hilfe von CSS aus und schreibe die gewünschten Angaben da rein.

Dann gibst du in der Tabellenzelle onmouseover an un hinterlgest eine JS-Funktion. In dieser Funktion wird das DIV eingeblendet und die Angaben werden sichtbar.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück