Organigramm

T

tacef

Mitglied
Hallo.

Ich mache gerade für meine Firma die Seite. Mein Chef will jetzt, das ich unsere Belegschaft mittels Organigramm anzeigen lasse.

In seiner alten Firma ging das ganze per Klick auf die Abteilung und dann wurde die Abteilung unter dem Organigramm angezeigt.
Sonst sah man nur das Organigramm.

Wie mach ich sowas? Hab bei Google gesucht, weis aber nicht wie dieser Effekt heist und ob man das mit Html alleine lösen kann.

Kann mir wer helfen?
 
Es ist ein Bild.

Ich werd mir mal die Lösungen von dir anschaun. Danke erstmal.

Hab mir die beiden Links jetzt angeschaut. Soweit hab ichs bis jetzt selber schon. Hab über jedes Abteilungskästchen eine Map gezogen und die mit Anker verlinkt.

Das setzt meines wissens aber eine immer angezeigte Position voraus oder?

Ich will ja das sonst nur das Organigramm angezeigt wird und keine Abteilung bzw Mitarbeiter. und erst bei klick auf die Abteilung im Organigramm soll die entsprechende Abteilung angezeigt werden.
 
Zuletzt bearbeitet:
Zum Verständnis

Du hast die Organigramme erstellt (Bilder)
Diese möchtest du auf der Seite einbinden.
Wenn nun ein User auf die Abteilung "Vertrieb" (auf dem bild) klickt, dann soll sich als Beispiel die Seite "Vertrieb.html" öffnen?
 
So in der Art.

Ich habe ein grosses Bild Organigramm.jpg.

Da hab ich die Maps drüber gelegt.

Ich will jetzt, dass, wenn man auf eine Abteilung klickt, UNTER dem Organigramm die Abteilung und deren Mitarbeiter angezeigt werden.

Im moment lös ich das mit Anker verlinkung und Tabellen.

Gibts da nicht was mit versteckten Tabellen, die mittels Javascript aus und eingeblendet werden können?
 
Nun habe ich verstanden was du willst ;)

also hier mal ein Code:
Hab ihn nicht selbst geschrieben sondern von google bekommen un ein wenig abgespeckt.
Aber das sollte so ca sein was du brauchst.
Und das Schlagwort heist JavaScript.

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>

<style type="text/css">
body, html {
font-family: Verdana, Arial;
font-size: 12px;
color: #000000;
padding: 5px;
}

.showtitel, .hidetitel, .txtout {
width: 600px;
font-size: 11px;
padding: 5px;
border: 1px solid #993300;
}

.showtitel {
color: #000000;
background: #fbeddb;
}

.txtout {
color: #000000;
background: #f4f4f4;
}

.showtitel a {
color: #990000;
text-decoration: none;
}
.showtitel a:hover {
color: #000000;
text-decoration: underline;
}
</style>
</head>
<body>

<script type="text/javascript" language="JavaScript">
<!--
function zeigen (cssid) {
  document.getElementById("THIDE_"+cssid).style.display="inline";
  document.getElementById("TITEL_"+cssid).style.display="none";
  document.getElementById("TOPCOL_"+cssid).style.backgroundColor = "#ebd5be";
  document.getElementById("TXT_"+cssid).style.display="inline";
  document.body.parentNode.style.backgroundColor = 'transparent';
return 1; 
}

function verbergen (cssid) {
  document.getElementById("TITEL_"+cssid).style.display="inline";
  document.getElementById("THIDE_"+cssid).style.display="none";
  document.getElementById("TOPCOL_"+cssid).style.backgroundColor="#fbeddb";
  document.getElementById("TXT_"+cssid).style.display="none";
  document.body.parentNode.style.backgroundColor = 'transparent';
return 1; 
}
//-->
</script>

<table cellspacing="2" cellpadding="0" border="0">
<tr>
    <td class="showtitel" id="TOPCOL_1"><a id="TITEL_1" style="display:inline;" href="javascript://" onclick="zeigen(1);">[+] Lorem Ipsum Text 1 anzeigen</a> <a id="THIDE_1" style="display:none;" href="javascript://" onclick="verbergen(1);">[-] Lorem Ipsum Text 1 verbergen</a></td>
</tr>
</table>

<table id="TXT_1" style="display:none;" cellspacing="2" cellpadding="0" border="0">
<tr>
	<td class="txtout">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
</tr>
</table>


</body>
</html>

Hoffe das hilft dir weiter.
 
Danke erstmal für die Hilfe.

Das ist zwar schon annährend das, was ich suche, allerdings ohne + und - knöpfe.

Wenn ich auf Abteilung 1 bin und im Organigramm auf Abteilung 2 klicke, soll Abteilungs 1 automatisch geschlossen und Abteilung 2 geschlossen werden.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück