 Objekte einblenden / ausblenden 01
In der simplen Form mag das Beispiel noch ein wenig verspielt erscheinen. Allerdings ist es ja durchaus ausbaufähig und zeigt die einfache Methode auf, Seiteninhalte ein- und auszublenden.
|
|
Objekte beim Anklicken ein- und ausblenden - Version 01
Ich erkläre Ihnen den Aufbau einer Funktion, mit der man Seiteninhalte gezielt auf 'sichtbar' und 'unsichtbar' schalten kann. So könnte das später aussehen:
Flagge anklicken
Ich liebe Dich
Ik hou van jou
Jeg elsker deg
Khao Raak Thoee
Toi yeu em
ja tebe kochaju
ben seni seviyorum
Ech hun Dech gär
Ai shite imasu
Je t'aime
I love you
Demo - simple Beispiele
Hier werden Verweise angezeigt. Beim Klicken wird die JavaScript-Funktion zum Umschalten aufgerufen. Wie Sie die Verweise gestalten (Text, Buttons, Grafik) bleibt Ihnen freigestellt.
Klicken Sie einen Textlink um den zugehörigen Text anzuzeigen. Nochmaliges Klicken blendet den Text wieder aus. Zitate und Fragen:
Man kann die eingeblendeten Inhalte 'dazwischen schieben', was bedeutet das die restlichen Seiteninhalte nach unten verschoben werden oder man hält einen Bereich für die Einblendung frei (wie oben bei den Flaggen). Die zweite Möglichkeit würde ich lediglich bei einzeiligen Infotexten wählen.
Ein- Ausblenden - Version 01
Seiteninhalte ein- und ausblenden per Mausklick. Eine Erweiterung und Anpassung dieses Anwendungsbeispiels (Version 01) finden Sie unter  Objekte ein- / ausblenden 02.
In dieser Version 01:
- Die Links funktionieren in dieser Variante wie ein Umschalter ein / aus.
- Mehrere Elemente können gleichzeitig sichtbar sein.
- Zu Beginn, beim Laden der Seite sind zunächst alle Elemete ausgeblendet.
- Die Elemente werden unterhalb der Links eingeblendet.
- Der restliche Seiteninhalt wird nach unten verschoben.
Gestaltung der Navigation (Screenshot)
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:
3 Beispiele für Version 01 Textlinks
Hier verwende ich Textverweise mit denen ich die JavaScript-Funktion zum Ein- und Ausblenden aufrufe. Wie das funktioniert erkläre ich weiter unten.
1 Variante 01 - Textlinks untereinander
Mehrere Elemente können sichtbar sein. Zu Beginn, beim Laden der Seite sind zunächst alle Elemete ausgeblendet. Die Elemente werden hier unterhalb des jeweiligen Links eingeblendet.
 Unterfamilien der Igel - Unterscheidungsmerkmale
Unterfamilien
Die beiden Unterfamilien unterscheiden sich erheblich in ihrem Äußeren. Während Rattenigel keine Stacheln haben und aufgrund ihrer langen Schnauze an Spitzmäuse erinnern, tragen die Stacheligel am Rücken Stacheln zur Verteidigung, und viele Arten können sich zu einer Kugel zusammenrollen. Das Gesicht aller Arten ist durch eine verlängerte Schnauze und gut entwickelte Augen und Ohren gekennzeichnet. Das scharfe Insektenfressergebiss weist 36 bis 44 Zähne auf. Die Gliedmaßen sind relativ kurz, die Füße enden meist in fünf Zehen. Die Schwanzlänge ist variabel, einige Vertreter der Rattenigel haben einen langen Schwanz, während er bei den Stacheligel meist nur ein kurzer Stummel ist.
Die Kopfrumpflängen dieser Tiere variieren von 10 bis 45 Zentimetern, der größte Igel ist der Große Rattenigel, der ein Gewicht von 2 Kilogramm erreichen kann, während die Kleinen Rattenigel nur 20 bis 80 Gramm auf die Waage bringen.
Verbreitung und Lebensraum - Vorkommen auf den Kontinenten
Verbreitung und Lebensraum
Igel sind auf die Alte Welt beschränkt, sie kommen in Europa, Afrika und Teilen Asiens vor. Sie bewohnen eine Vielzahl von Lebensräumen, wobei die Stacheligel eher auf trockene Lebensräume beschränkt sind. Einige Gattungen wie die Wüsten- und Langohrigel sind sogar ausgesprochene Bewohner trockener Regionen. Die Rattenigel hingegen bevorzugen feuchte Habitate wie Regenwälder, zumindest eine Art, der Große Rattenigel, kann ausgezeichnet schwimmen und geht auch im Wasser auf Nahrungssuche.
Foto Igel - Bildquelle: Wikipedia
2 Variante 02 - Textlinks untereinander
Mehrere Elemente können sichtbar sein. Zu Beginn, beim Laden der Seite sind zunächst alle Elemete ausgeblendet. Die Elemente werden hier unterhalb aller Links eingeblendet.
Unterfamilien der Igel - Unterscheidungsmerkmale
Verbreitung und Lebensraum - Vorkommen auf den Kontinenten
Foto Igel - Bildquelle: Wikipedia
Unterfamilien
Die beiden Unterfamilien unterscheiden sich erheblich in ihrem Äußeren. Während Rattenigel keine Stacheln haben und aufgrund ihrer langen Schnauze an Spitzmäuse erinnern, tragen die Stacheligel am Rücken Stacheln zur Verteidigung, und viele Arten können sich zu einer Kugel zusammenrollen. Das Gesicht aller Arten ist durch eine verlängerte Schnauze und gut entwickelte Augen und Ohren gekennzeichnet. Das scharfe Insektenfressergebiss weist 36 bis 44 Zähne auf. Die Gliedmaßen sind relativ kurz, die Füße enden meist in fünf Zehen. Die Schwanzlänge ist variabel, einige Vertreter der Rattenigel haben einen langen Schwanz, während er bei den Stacheligel meist nur ein kurzer Stummel ist.
Die Kopfrumpflängen dieser Tiere variieren von 10 bis 45 Zentimetern, der größte Igel ist der Große Rattenigel, der ein Gewicht von 2 Kilogramm erreichen kann, während die Kleinen Rattenigel nur 20 bis 80 Gramm auf die Waage bringen.
Verbreitung und Lebensraum
Igel sind auf die Alte Welt beschränkt, sie kommen in Europa, Afrika und Teilen Asiens vor. Sie bewohnen eine Vielzahl von Lebensräumen, wobei die Stacheligel eher auf trockene Lebensräume beschränkt sind. Einige Gattungen wie die Wüsten- und Langohrigel sind sogar ausgesprochene Bewohner trockener Regionen. Die Rattenigel hingegen bevorzugen feuchte Habitate wie Regenwälder, zumindest eine Art, der Große Rattenigel, kann ausgezeichnet schwimmen und geht auch im Wasser auf Nahrungssuche.
2 Variante 03 - Textlinks nebeneinander
Mehrere Elemente können sichtbar sein. Zu Beginn, beim Laden der Seite sind zunächst alle Elemete ausgeblendet. Die Elemente werden unterhalb der Linkzeile eingeblendet.
Unterfamilien
Die beiden Unterfamilien unterscheiden sich erheblich in ihrem Äußeren. Während Rattenigel keine Stacheln haben und aufgrund ihrer langen Schnauze an Spitzmäuse erinnern, tragen die Stacheligel am Rücken Stacheln zur Verteidigung, und viele Arten können sich zu einer Kugel zusammenrollen. Das Gesicht aller Arten ist durch eine verlängerte Schnauze und gut entwickelte Augen und Ohren gekennzeichnet. Das scharfe Insektenfressergebiss weist 36 bis 44 Zähne auf. Die Gliedmaßen sind relativ kurz, die Füße enden meist in fünf Zehen. Die Schwanzlänge ist variabel, einige Vertreter der Rattenigel haben einen langen Schwanz, während er bei den Stacheligel meist nur ein kurzer Stummel ist.
Die Kopfrumpflängen dieser Tiere variieren von 10 bis 45 Zentimetern, der größte Igel ist der Große Rattenigel, der ein Gewicht von 2 Kilogramm erreichen kann, während die Kleinen Rattenigel nur 20 bis 80 Gramm auf die Waage bringen.
Verbreitung und Lebensraum
Igel sind auf die Alte Welt beschränkt, sie kommen in Europa, Afrika und Teilen Asiens vor. Sie bewohnen eine Vielzahl von Lebensräumen, wobei die Stacheligel eher auf trockene Lebensräume beschränkt sind. Einige Gattungen wie die Wüsten- und Langohrigel sind sogar ausgesprochene Bewohner trockener Regionen. Die Rattenigel hingegen bevorzugen feuchte Habitate wie Regenwälder, zumindest eine Art, der Große Rattenigel, kann ausgezeichnet schwimmen und geht auch im Wasser auf Nahrungssuche.
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.
so funktioniert's
1. Die Inhalte
Die später einzublendenden Seiteninhalte fasse ich in separaten Containern zusammen, die zunächst einmal nicht sichtbar sein sollen. Diese Container enthalten dann z.B. Text, Grafiken, Fotos, Links, ... für eine Anzeige-Rubrik.
Die Objekte (Anzeigeelemente) stehen also in <div>-Containern, deren Eigenschaften auf 'nicht anzeigen' eingestellt sind (display:none). 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.
<div style="display:none;" class="dbox" id="para10">
Inhalte 1
</div>
<div style="display:none;" class="dbox" id="para11">
Inhalte 2
</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 Ein- Ausblenden mit einer Funktion
Ein JavaScript organisiert das Ein- / Ausblenden und funktioniert wie ein Umschalter. Beim Anklicken wird die Funktion "toggleMe" aufgerufen der die ID des Containers übergeben wird, der ein- bzw. ausgeblendet werden soll. Beim Umschalten wird die Eigenschaft auf 'sichtbar' beziehungsweise 'unsichtbar' umgestellt. Das geschieht hier mit der Eigenschaft display="none" bzw. display="block" .
Mit einer solchen Anweisung wird beim Klicken die Eigenschaft für den Container (den Div-Bereich) mit der ID "para10" umgeschaltet:
onclick="return toggleMe('para10')"
Meine Namensvergabe für die Funktion: toggle [englisch] = hin- und herschalten.
3. der Link zum Umschalten
In einen Textlink 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>
Quellcode
Sie können auch die Textdatei mit dem gesamten Code oder die ZIP-Datei (HTML) verwenden. 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){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
} else {
e.style.display="none"
}
return true;
}
//-->
</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 ü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:none">
<h3>Merkmale des Igels</h3>
Die beiden Unterfamilien unterscheiden sich erheblich ...
</div>
<div id="para11" style="display:none">
<h3>Verbreitung des Igels</h3>
Igel sind auf die Alte Welt beschränkt, sie kommen in ...
</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.
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 solchen Eintrag im Head-Bereich. Ich verwende hier die CSS-Klasse 'dbox', die bereits im Code für den Link eingetragen wurde.
<style type="text/css">
<!--
.dbox{
width:500px;
border:1px solid #00AFFF;
padding:15px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
font-weight:normal;
color: #0050A0;
background-color:#F9FCFF;
line-height:130%;
margin: 5px 0px 10px 0px;
}
-->
</style>
Grundlage für dieses Script gefunden bei:
The JavaScript Source http://javascript.internet.com
Autor: Ultimater, Mr J
Modifikationen: W. Jansen
e) Grafiken (rechtsklicken zum Download)
Mehr als 8000 Grafiken finden Sie zum kostenlosen Download in meiner  MINI-IMAGE-Box 
 Objekte ein- / ausblenden Version 01 - Beispiel 01
Objekte ein- / ausblenden Version 02
|
Home • Diverses • ein- ausblenden
Download 01
