Eigentlich sollte das Modul die Bezeichnung "Status-Umschalter" haben. Beim Aufruf der Funktion ändert sich der (Sichtbarkeits-)Status eines Objekts. Es wird zwischen zwei Zuständen hin und her geschaltet: Sichtbar / unsichtbar.

• Ist der augenblickliche Status eines Objekts beim Klicken "ausgeblendet",
  wird das Objekt eingeblendet.
  
  
• Ist der augenblickliche Status eines Objekts beim Klicken "eingeblendet",
  wird das Objekt ausgeblendet.

   Ein- Ausblenden - Version 02

Mit dem Modul kann man Seiteninhalte per Mausklick ein- und ausblenden. Das Script kann für mehrere Objekte einer Seite eingesetzt werden. Das bedeutet aber, das unter Umständen auch mehrere Objekte gleichzeitig auf sichtbar geschaltet wurden und angezeigt werden.

Erweiterung in dieser Version:

Um das zu unterbinden habe ich hier in der Version02 eine zweite Funktion notiert die sicher stellt, das vor jeder Aktion grundsätzlich alle sichtbaren Objekte ausgeblendet werden.

Damit beim Klicken ein vorher eventuell bereits auf "sichtbar" geschaltetes anderes Objekt ausgeblendet wird, rufe ich (vorsichtshalber) generell eine Funktion auf, die alle Elemente auf 'nicht sichtbar' schaltet. Sonst würden unter Umständen gleichzeitig mehrere Objekte sichtbar sein und untereinander angezeigt.

Man kann allerdings die Funktion "AlleAusxx()" auch gezielt aufrufen, um angezeigte Objekte auszublenden. (Siehe unten Beispiel 3)

Eigenschaften des Moduls in der Version 02:

• Die Links funktionieren hier in dieser Variante wie ein Umschalter.
• Jeweils (und ausschließlich) nur ein Element ist sichtbar.
• Zu Beginn, beim Laden der Seite ist ein Element bereits eingeblendet.
• Die Elemente werden unterhalb der Links eingeblendet.
• Der restliche Seiteninhalt wird nach unten verschoben.

Einsatzbereiche:

Auf Ihrer Webseite werden Verweise angezeigt. Beim Klicken wird die Funktion zum Umschalten aufgerufen. Eine optisch ansprechende Möglichkeit Seiteninhalte erst einmal zu verbergen, mit der Option sie auf Wunsch dennoch anzeigen zu können. Ganz ohne Pop-Up-Window! Wie Sie die Verweise gestalten (Text, Buttons, Grafik) bleibt Ihnen freigestellt.


   Beispiele für Version 02

Hier sehen Sie nun Beispiele die vom Aufbau her identisch sind. Sie unterscheiden sich lediglich in der Darstellung der Links, die einmal als Grafiklink und im zweiten Beispiel als Textlink angezeigt werden. Im Beispiel 3 gibt es einen zusätzlichen Link, der eine Funktion zum ausblenden aller Objekte aufruft (Beispiele sind im Download enthalten)


1  Variante mit Grafiklinks (Flaggen anklicken)


       



2  Variante mit Textlinks






3  Variante mit Textlinks + Link zum Ausblenden






4  Variante mit Textlinks + Startbox






Aufwand für den Webmaster

• JavaScript im Head-Bereich notieren
• Links / Navigationsleiste im Body-Bereich notieren
• AnzeigeBoxen im Body-Bereich notieren

---

Für Schnellstarter

So viel zu den Demos! Lassen sie sich von den langen Erklärungen hier nicht abschrecken und kopieren für einen ersten Versuch einfach den Code in ihre Seite (Textdatei des Quellcodes im Kopfbereich oben). Wenn sie mehr über Funktion und Anpassungen erfahren möchten, lesen Sie unten weiter.

Wenn Ihnen das als Einstieg ausreicht öffnen Sie die Quellcodeseite, kopieren den Code in Ihre Seite und experimentieren weiter. Am Einfachsten ist es, die ZIP-Datei herunter zu laden und zu entpacken. Grafiken und eine Demo-Datei haben Sie dann bereits auf Ihrer Festplatte.

---

   so funktioniert's

1. Die Inhalte

Die später einzublendenden Seiteninhalte fasse ich in separaten Containern zusammen, die zunächst einmal nicht alle sichtbar sein sollen. Diese Container enthalten dann z.B. Text, Grafiken, Fotos, Links, ... . Jeder Div-Container bekommt eine eindeutige ID (paraXX). Anhand der ID kann man mit JavaScript den entsprechenden Container ansprechen und die Eigenschaft auf sichtbar / unsichtbar schalten.

Beim Start ist einer der Container sichtbar. Dessen Eigenschaft ist auf 'anzeigen' eingestellt (display:block). Alle anderen Seiteninhalte stehen in <div>-Containern, deren Eigenschaften auf 'nicht anzeigen' eingestellt sind (display:none).

<div style="display:block;" class="dbox" id="para10">
Inhalte 1
</div>

<div style="display:none;" class="dbox" id="para11">
Inhalte 2
</div>

<div style="display:none;" class="dbox" id="para12">
Inhalte 3
</div>

...

Ich habe hier zusätzlich eine CSS-Klasse zugewiesen, mit der ich die Formatierung der Box festlegen mochte (Rand, Größe, Textformatierung, Abstände, Hintergrund).


2. Das Umschalten

Eine JavaScript-Funktion organisiert das Ein- / Ausblenden und funktioniert wie ein Umschalter. Beim Anklicken wird die Funktion "toggleMe" aufgerufen der die ID des Containers übergeben wird, der eingeblendet werden soll. Beim Umschalten wird die Eigenschaft auf 'sichtbar' umgestellt. Das geschieht mit der Eigenschaft display="block" .

Mit einer solchen Anweisung wird beim Klicken der Anzeigezustand des Containers (der Div-Bereich) mit der ID "para10" umgeschaltet:

onclick="return toggleMe('para10')"

Damit beim Einblenden eines Containers die Eigenschaften der anderen Container auf 'unsichtbar' eingestellt sind, wird die Funktion 'AlleAus()' aufgerufen. Ich habe mir die Arbeit leicht gemacht und untersuche dabei nicht welcher Container vorher zu sehen war und blende diesen Container gezielt aus, sondern schalte einfach sämtliche Container auf 'nicht sichtbar'.


3. Anweisung zum Umschalten

Bei welcher Gelegenheit / Aktion / Event umgeschaltet werden soll, können Sie selbst bestimmen. Ich mache das hier von einem JavaScript-Event abhängig. Es geschieht also beim Klicken (onClick). Möglich wäre auch z.B. beim Überfahren mit dem Mauszeiger (onMouseOver), beim Laden der Seite (onLoad), usw. . Falls Ihnen die JavaScript-Eventhandler nicht bekannt sind, finden Sie Infos dazu auf der Seite

EventHandler Erklärung und Übersicht.

Rein theoretisch wäre auch jede andere Abhängigkeit möglich: Während eines bestimmten Zeitraums, an einem bestimmten Datum, zu einer bestimmten Tageszeit, am ersten Ferientag in NRW, ... .

Ich nehme hier zur Erklärung einmal einen einfachen Textlink

In einen Link trage ich als Referenz "javascript:void(0)" ein. Damit verweist dieser Link nicht auf ein Ziel. Er ist ohne Funktion. Beim Anklicken geschieht offenbar nichts. Mit diesem Eintrag verhindere ich, das beim Anklicken die Seitenanzeige nach oben rückt (das geschähe mit dem Eintrag '#').

<a href="javascript:void(0)">
Linktext
</a>

Nun trage ich den JavaScript-Eventhandler (onClick) ein der überwacht, ob der Link angeklickt wird. Wenn ja, wird die eingetragene JavaScript-Funktion (toggleMe) aufgerufen. Der Funktion "toggleMe" übergebe ich die ID für das Element, dessen Anzeige-Eigenschaft umgeschaltet werden soll.

<a onclick="return toggleMe('paraXX')" href="javascript:void(0)">
Linktext
</a>

Beispiel: Mit der Notierung dieses Links kann ich beim Anklicken die Eigenschaft für die Anzeige-Box mit der ID "para10" umschalten.

<a onclick="return toggleMe('para10')" href="javascript:void(0)">
Merkmale des Igels
</a>

Beispiel: Mit der Notierung dieses Links kann ich beim Anklicken die Eigenschaft für die Anzeige-Box mit der ID "para11" umschalten.

<a onclick="return toggleMe('para11')" href="javascript:void(0)">
Verbreitung des Igels
</a>

Beispiele:

a  Bei einem Textlink mit 'onClick' (beim Anklicken des Objekts)

Hier verwende ich einen Link. Der Eventhandler 'onClick' überwacht ob das Objekt 'Link' angeklickt wird und ruft dann die Funktion 'toggleMe' auf.

<a onclick="return toggleMe('paraXX')" href="javascript:void(0)">
Linktext
</a>

b  Bei einer Grafik mit 'onClick' (beim Anklicken des Objekts)

Hier verwende ich keinen Link. Der Eventhandler 'onClick' überwacht ob das Objekt 'Grafik' angeklickt wird und ruft dann die Funktion 'toggleMe' auf.

<img onClick="return toggleMe('paraXX')" src="deutschland.gif" width="30" ... >

c  Bei einer Grafik mit 'onMouseOver' (beim Überfahren des Elements mit der Maus)

Hier verwende ich keinen Link. Der Eventhandler 'onMouseOver' überwacht ob das Objekt 'Grafik' mit dem Mauszeiger überfahren wird und ruft dann die Funktion 'toggleMe' auf.

<img onMouseOver="return toggleMe('paraXX')" src="deutschland.gif" width="30" ... >

   Quellcode

Zum Kopieren des gesamten Quellcodes verwenden Sie vorzugsweise die Textdatei oder laden die ZIP-Datei herunter. Die Links finden Sie im Kopfbereich dieser Seite.

a) Script

im Head-Bereich der HTML-Seite:

<script type="text/javascript" language="JavaScript">
<!--

function toggleMe(a){

// bei einer Aktion zunächst alle ausblenden
AlleAus()

var e = document.getElementById(a);

// Prüfung exixtiert eine Element mit dieser ID?
if(!e)return true;

  // Umschaltung
  if(e.style.display == "none")
  {
  e.style.display = "block"
  }
  else
  {
  e.style.display = "none"
  }

return true;
}


// hier müssen alle Container-IDs eingetragen werden
// die Funktion schaltet alle Boxen auf unsichtbar

function AlleAus() {
   para10.style.display = "none";
   para11.style.display = "none";
   para12.style.display = "none";
}

//-->
</script>

b) Link-Code

im Body-Bereich der HTML-Seite:

Für jede Div-Box notieren Sie einen Link. Tragen Sie im Aufruf der JavaScript-Funktion (toggleMe) die ID für das Element ein, dessen Anzeige-Eigenschaft umgeschaltet werden soll. Der Fachmann sagt: Der Funktion wird die ID übergeben. Der Funktion wird als Parameter die ID der Box übergeben.

<a onclick="return toggleMe('paraXX')" href="javascript:void(0)">
Linktext 01
</a>

<a onclick="return toggleMe('paraXX')" href="javascript:void(0)">
Linktext 02
</a>

...

c) Notierung der Anzeige-Elemente (Anzeige-Boxen)

im Body-Bereich der HTML-Seite:

Die Inhalte der anzuzeigenden Elemente stehen innherhalb eines Div-Containers. Jeder Container hat eine eindeutige ID. Die Eigenschaft des Containers wird grundsätzlich auf 'nicht anzeigen' (display:none) eingestellt.

<div id="para10" style="display:block">
<h3>Belgien</h3>
Der Bundesstaat Belgien ist in drei ...
</div>

<div id="para11" style="display:none">
<h3>Dänemark</h3>
Dänemark gehört seit 1973 zur EU ...
</div>

<div id="para11" style="display:none">
<h3>Deutschland</h3>
Deutschland ist ein föderalistischer Staat ...
</div>

...

Eine ID darf innerhalb einer HTML-Seite nur ein mal vorkommen!
Beim Einfügen weiterer Sektionen unterschiedliche IDs verwenden!
(ich nummeriere sie der Einfachheit halber durch)

Die Div-Container werden dort angezeigt, wo sie notiert sind. Stehen alle Div-Container unterhalb der sämtlicher Links, werden sie auch dort angezeigt. Werden die Div-Container jeweils zwischen den Links notiert, erscheint der Inhalt später auch zwischen den Links.


ein Container soll sichtbar sein

Der Container der gleich beim Laden der Seite angezeigt werden soll bekommt statt der Eigenschaft "display:none" die Eigenschaft "display:block".

<div style="display:none;" class="dbox2" id="para10">
<div style="display:block;" class="dbox2" id="para10">

d) Notierung der CSS-Eigenschaften für die Box

im Head-Bereich der HTML-Seite:

Eine Formatierungsanweisung muss nicht festgelegt werden. Wenn Sie allerdings Breite, Rand, Textformatierung und Abstände festlegen möchten, rate ich zu einem CSS-Eintrag im Head-Bereich. Ich verwende hier in der Demo die CSS-Klasse 'dbox2'.

Die Höhe der Box habe ich mit 120 Pixel festgelegt. Das sollten Sie eventuell anpassen oder ganz weg lassen. Außerdem wurden für Überschriften der Kategorie h1 und h3 innerhalb der Box eine Textformatierung vorgesehen.

<style type="text/css">
<!--

.dbox2 {
width: 500px;
height: 80px;
margin: 10px 0 10px 0;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 11px;
font-weight: normal;
color: #0050A0;
background-color: #FCFAFC;
border: 1px solid #0090E0;
padding: 15px;
}

.dbox2 h1 {
font-family :Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
color: #0050A0;
text-transform :none;
line-height: 100.01%;
margin: 8px 0;
}

.dbox2 h3 {
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
color: #0050A0;
text-transform:none;
margin: 8px 0;
}

-->
</style>

e) verwendete Grafiken   (rechtsklicken zum Download)

  

              (Darstellung hier mit border="1")

Mehr als 8000 Grafiken finden Sie zum kostenlosen Download in meiner MINI-IMAGE-Box

---

---

Erweiterung

Die Funktion AlleAus() soll beim Einblenden einer Box generell erst einmal alle anderen Boxen ausblenden. Das erspart mir die zuletzt eingeblendete Box gezielt ausblenden zu müssen. Die Funktion AlleAus() kann auch dazu genutzt werden, sämtliche Boxen auszublenden.

Demo 03   Download Demo 03 






   Gestaltung der Navigation (Screenshot)

Das Modul zum Ein- Ausblenden können Sie natürlich auch in Ihren Fließtext über gewöhnliche Textlinks einbauen. Deutlicher wird die Möglichkeit für den Seitenbesucher bei einer Menüleiste, die unterschiedlich aussehen kann:

Stellen Sie sich das Ganze einmal mit der Darstellung von Kartenreitern (wie auf meiner Startseite) vor und ihnen wird deutlich, dass Sie eine optisch ansprechende Möglichkeit schaffen können, Erklärungen oder eher unwichtige Inhalte erst einmal zu verbergen, mit der Option sie dennoch anzeigen zu können. Ganz ohne Pop-Up-Window. Beispiele für die Navigation:












Objekte ein- / ausblenden Version 01

Objekte ein- / ausblenden Version 01 - Beispiel 01

Objekte ein- / ausblenden Version 03

Textrotation 01 - zeilenweise automatische Anzeige

Textrotation 03 Sprechblasentext, automatisch + manuell