✔ Probleme bei der Darstellung in einem Div

[Boof]

Guten Morgen,

ich hätte da mal wieder ein kleines Problem auf dessen Lösung ich einfach nicht komme.

Ich habe eine kleine Seite erstellt. Auf dieser Seite ist ein Bild eingefügt das eine Art Baumstruktur anzeigt. Dort gibt es einzelne Kategorien. Wenn man nun mit der Maus über solch eine Kategorie fährt, wird per Javascript ein Div angezeigt, welches Informationen zu der jeweiligen Kategorie beinhaltet. Die Informationen für das Div hole ich mir aus einer Datenbank. Das klappt auch alles soweit ganz gut.

ABER wenn für eine Kategorie mehrere Einträge vorhanden sind, werden sie nicht angezeigt, sondern nur der erste Eintrag. Ich bekomme es einfach nicht hin, dass mehrere Einträge untereiandner angezeigt werden. Ich hoffe ihr könnt mir helfen.

CODE:
Javascript:

		function show(nr) {
				document.getElementById('Personal'+nr+'').style.display = 'block';
		} 
		function hide(nr) {
			document.getElementById('Personal'+nr+'').style.display = 'none';
		}

Hier mein Javascript-Einsatz über Koordinaten in dem Bild:

<map name="verweise">
	<area shape=rect coords="285,73,396,60" href="#" OnMouseOver='show(1)' OnMouseOut='hide(1)'>
	<area shape=rect coords="285,125,398,135" href="#" OnMouseOver='show(2)' OnMouseOut='hide(2)'>
	<area shape=rect coords="285,185,310,195" href="#" OnMouseOver='show(3)' OnMouseOut='hide(3)'>
	<area shape=rect coords="285,258,352,249" href="#" OnMouseOver='show(4)' OnMouseOut='hide(4)'>
	<area shape=rect coords="285,315,340,305" href="#" OnMouseOver='show(5)' OnMouseOut='hide(5)'>
	<area shape=rect coords="60,100,205,90" href="#" OnMouseOver='show(6)' OnMouseOut='hide(6)'>
	<area shape=rect coords="115,165,205,155" href="#" OnMouseOver='show(7)' OnMouseOut='hide(7)'>
	<area shape=rect coords="137,225,205,215" href="#" OnMouseOver='show(8)' OnMouseOut='hide(8)'>
	<area shape=rect coords="130,290,205,280" href="#" OnMouseOver='show(9)' OnMouseOut='hide(9)'>
</map>

Und hier meine Abfrage und mein Div:

		$p_id2 = mysql_query("SELECT
									*
								FROM
									personal
								LEFT JOIN
									id
								ON
									personal.id=id.id
								");	
		
		while($spalte = mysql_fetch_array($p_id2)) {
		
			$p_id = $spalte['id'];
			$name = $spalte['name'];
			$funktion = $spalte['funktion'];
			$beschreibung = $spalte['beschreibung'];
			$a_id = $spalte['a_id'];
			$pic = $spalte['picture'];
		
			if ($a_id == '1') {
			echo'
			<div id="Personal'.$a_id.'" style="display:none; position:absolute; top:265px; left:460px; width:300px; height:215px; margin:auto; background-image: url(bilder/layout.gif); background-repeat:no-repeat">
				<br />
				<table cellpadding="0" cellspacing="0" style="width:100%;">
					<tr>
						<td style="text-align:center;">
							<span class="a5">
								'.$name.'
								<br />
								<br />
							</span>
						</td>
					</tr>
				</table>
				<table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
					<tr>
						<td rowspan="2" style="width:20%; padding-left:35px;">
								<img src="'.$pic.'" width="85px" height="110px;"></td>
						<td style="vertical-align:top; padding-left:5px;">
							<span class="a1">
								Funktion:
								<br />
								'.$funktion.'
							</span>
						</td>
					<tr>
						<td style="vertical-align:top; padding-left:5px;">
							<p class="a1" style="margin:0;">
								Beschreibung:
								<br />
								'.$beschreibung.'
							</p>
						</td>
					</tr>
					</tr>
				</table>
			</div>';
			}
         }

Über die a_id wird die Kategorie bestimmt und die p_id sowie name, funktion, beschreibung und pic werden zusammengefasst und ergeben dann einen Eintrag aus der Datenbank.

 

[Azi]

Hi,

liegts vielleicht an "if ($a_id == '1')"?

Azi

 

[Boof]

Hi,
ne daran liegt es nicht.
Ich habe das so gemacht, dass ich für jede Kategorie ein Div erstellt habe.
Mit "if ($a_id == '1')" frage ich nur die Kategorienummer ab. Anhand dieser Nummer werden dann die restlichen Infos ausgelesen.

Aber schonmal danke für dein Beteiligung.

 

[hubeR83]

Dann haben, so wie ich das sehe, deine DIV's immer die gleiche ID!? Dann kann es nicht klappen mit dem JavaScript...

IDs dürfen nur einmal vorkommen, nicht öfters...

 

[Boof]

Hi,
durch die While-Schliefe haben sie immer eine andere ID.

Ich hab das nun nochmal anders aufgebaut damit es auch übersichtlicher ist.

Abfrage und Div:

		$abfrage = mysql_query("SELECT
									abteilungen.a_id,
									personal.*
								FROM
									abteilungen
								LEFT JOIN
									id
								ON
									abteilungen.a_id=id.a_id
								LEFT JOIN
									personal
								ON
									personal.id=id.id
							   ");

		while($spalte = mysql_fetch_array($abfrage)) {
			$p_id = $spalte['id'];
			$name = $spalte['name'];
			$funktion = $spalte['funktion'];
			$beschreibung = $spalte['beschreibung'];
			$pic = $spalte['picture'];
			$a_id = $spalte['a_id'];
			
			switch ($a_id) {
			case 1:
				$top = '265px';
				$left = '460px';
				$width = '300px';
				$height = '215px';
				break;
			case 2:
				$top = '330px';
				$left = '460px';
				$width = '300px';
				$height = '215px';
				break;
			case 3:
				$top = '386px';
				$left = '460px';
				$width = '300px';
				$height = '215px';
				break;
			case 4:
				$top = '455px';
				$left = '460px';
				$width = '300px';
				$height = '215px';
				break;
			case 5:
				$top = '515px';
				$left = '460px';
				$width = '300px';
				$height = '215px';
				break;
			case 6:
				$top = '295px';
				$left = '240px';
				$width = '300px';
				$height = '215px';
				break;
			case 7:
				$top = '360px';
				$left = '240px';
				$width = '300px';
				$height = '215px';
				break;
			case 8:
				$top = '420px';
				$left = '240px';
				$width = '300px';
				$height = '215px';
				break;
			case 9:
				$top = '485px';
				$left = '240px';
				$width = '300px';
				$height = '215px';
				break;
			}

		echo'
		<div id="Abteilung'.$a_id.'" style="display:none; position:absolute; top:'.$top.'; left:'.$left.'; width:'.$width.'; height:'.$height.'; margin:auto; background-image: url(bilder/layout.gif); background-repeat:no-repeat">
				<br />
				<table cellpadding="0" cellspacing="0" style="width:100%;">
					<tr>
						<td style="text-align:center;">
							<span class="a5">
								'.$name.'
								<br />
								<br />
							</span>
						</td>
					</tr>
				</table>
				<table cellpadding="0" cellspacing="0" style="width:100%;">
					<tr>
						<td rowspan="2" style="width:20%; padding-left:35px;">
								<img src="'.$pic.'" width="85px" height="110px;"></td>
						<td style="vertical-align:top; padding-left:5px;">
							<span class="a1">
								Funktion:
								<br />
								'.$funktion.'
							</span>
						</td>
					<tr>
						<td style="vertical-align:top; padding-left:5px;">
							<p class="a1" style="margin:0;">
								Beschreibung:
								<br />
								'.$beschreibung.'
							</p>
						</td>
					</tr>
					</tr>
				</table>
			</div>'
		;}

So habe ich nur noch ein Div und kann es mit den Variablen $top, $left, $width und $height für jeden einzelnen Eintrag formatieren.
Nur das Problem bleibt trotzdem wenn eine Kategorie mehrere Einträge hat wird immer nur einer angezeigt

Ich komm einfach nicht dahinter wie alle Einträge für die jeweilige Kategorie angezeigt werden.

 

[Boof]

Hi,

ich hab es nun hinbekommen. Ich habe nun auf den LEFT JOIN verzichtet irgendwie versteh ich nicht wie ich mit LEFT JOIN arbeiten muss.

Hier dann die Lösung falls es jemanden interessiert.

		$query_abteilungen = mysql_query("SELECT * FROM abteilungen");
		
		while($spalte=mysql_fetch_array($query_abteilungen)) {
		$a_id = $spalte['a_id'];
		
			switch ($a_id) {
				case 1:
					$top = '265px';
					$left = '460px';
					$width = '300px';
					$height = '215px';
					break;
				case 2:
					$top = '330px';
					$left = '460px';
					$width = '300px';
					$height = '215px';
					break;
				case 3:
					$top = '386px';
					$left = '460px';
					$width = '300px';
					$height = '215px';
					break;
				case 4:
					$top = '455px';
					$left = '460px';
					$width = '300px';
					$height = '215px';
					break;
				case 5:
					$top = '515px';
					$left = '460px';
					$width = '300px';
					$height = '530px';
					break;
				case 6:
					$top = '295px';
					$left = '240px';
					$width = '300px';
					$height = '215px';
					break;
				case 7:
					$top = '360px';
					$left = '240px';
					$width = '300px';
					$height = '215px';
					break;
				case 8:
					$top = '420px';
					$left = '240px';
					$width = '300px';
					$height = '215px';
					break;
				case 9:
					$top = '485px';
					$left = '240px';
					$width = '300px';
					$height = '215px';
					break;
			}

			echo	
			'<div id="Abteilung'.$a_id.'" style="display:none; position:absolute; top:'.$top.'; left:'.$left.'; width:'.$width.'; height:'.$height.'; margin:auto;">';
			   
			$id = mysql_query("SELECT * FROM id WHERE a_id = $a_id");
			
			while($spalte = mysql_fetch_array($id)) {
			$p_id = $spalte['id'];
			$a_id = $spalte['a_id'];
			
				$abfrage= mysql_query("SELECT * FROM personal WHERE id = $p_id");
				
				while($spalte = mysql_fetch_array($abfrage)) {
					$p_id = $spalte['id'];
					$name = $spalte['name'];
					$funktion = $spalte['funktion'];
					$beschreibung = $spalte['beschreibung'];
					$pic = $spalte['picture'];
					$a_id = $spalte['a_id'];
				}
		
				echo	
				'<div style="display:block; height:215px; background-image: url(bilder/layout.gif); background-repeat:no-repeat">
					<br />
					<table cellpadding="0" cellspacing="0" style="width:100%;">
						<tr>
							<td style="text-align:center;">
								<span class="a5">
									'.$name.'
									<br />
									<br />
								</span>
							</td>
						</tr>
					</table>
					<table cellpadding="0" cellspacing="0" style="width:100%;">
						<tr>
							<td rowspan="2" style="width:20%; padding-left:35px;">
									<img src="'.$pic.'" width="85px" height="110px;"></td>
							<td style="vertical-align:top; padding-left:5px;">
								<span class="a1">
									Funktion:
									<br />
									'.$funktion.'
								</span>
							</td>
						<tr>
							<td style="vertical-align:top; padding-left:5px;">
								<p class="a1" style="margin:0;">
									Beschreibung:
									<br />
									'.$beschreibung.'
								</p>
							</td>
						</tr>
						</tr>
					</table>
				</div>';
			}
			echo
			'</div>';
		}

Thema ist somit erledigt.