# Organigramm



## tacef (13. August 2009)

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?


----------



## awortmeier (13. August 2009)

Hallo,

mapping wäre ne Idee:
http://www.html-world.de/program/html_14.php
http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm

Hoffe das hilft dir weiter

MIr fällt ein,

ist das ein Bild oder einen aus HTML Tags zusammengebautes Konstrukt?


----------



## tacef (13. August 2009)

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.


----------



## awortmeier (13. August 2009)

Hallo nochmal 

habe gerade ein wenig gegooglt für dich und folgendes gefunden:
http://www.abdn.ac.uk/tools/ibmpc/mapthis/
Damit hast du es vieleicht ein wenig einfacher.


----------



## tacef (13. August 2009)

Das ist auch nicht wirklich das, was ich Suche. Die Maps hab ich ja schon erstellt.


----------



## awortmeier (13. August 2009)

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?


----------



## tacef (13. August 2009)

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?


----------



## awortmeier (13. August 2009)

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.


```
<!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.


----------



## Mark (13. August 2009)

Hi!

Als Alternative zu JS gibt's auf CSSplay schöne CSS-Lösungen, z.B.:
http://www.cssplay.co.uk/menu/old_master
http://www.cssplay.co.uk/menu/scrollmap
http://www.cssplay.co.uk/menu/marbles
...vielleicht läßt sich daraus etwas stricken 

Liebe Grüße,
Mark.


----------



## tacef (13. August 2009)

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.


----------

