Erweiterbare Sektionen

Beispiel 1

Beispiel 2

Beispiel 3

Um erweiterbare Sektionen zu erstellen ist etwas Javascript und etwas Cascading Style Sheet notwendig.

Das Javascript, dass in den <head> Bereich oder die externe Javascript Datei eingebunden wird sieht wie folgt aus:

<script language="JavaScript">

function doSection (section,chgif){
	

if (section.style.display=="none"){section.style.display="";chgif.src="on.gif"}
	

else{section.style.display="none";chgif.src="off.gif"}


} 

function noSection (section,chgif){
	

if (section.style.display==""){section.style.display="none";chgif.src="off.gif"}


}


</script>

Das Script erweitert beim Anklicken die Sektion und wechselt das Pfeil Bild rechts in ein Pfeil Bild nach unten.

Bei den Style Sheets sind Angaben für die gesonderten Hyperlinks und für einen gesonderten <div> Tag notwendig. Der <div> Tag gibt den Hintergrund der erweiterbaren Sektion an.

Die Style Sheets können beliebig verändert und den Bedürfnissen der jeweiligen Seite angepasst werden.

Für die Hyperlinks können z.B. folgende Style Angaben verwendet werden :

a:sidebar {color: #339900; }

a:visited.sidebar {color: #339900; text-decoration: none; }

a:hover.sidebar {text-decoration: underline;}

der Zusatz .sidebar ergibt sich aufgrund der class Definition im <a> Tag (siehe unten)

Für den <div> Tag, für den sinnvoller Weise auch eine Klasse definiert wird, kann z.B. folgendes Styling benutzt werden

DIV.ts-side {

position: relative;

left: 8px;

height: auto;

width: 300px;

margin-top: .6em;

margin-right: 3em;

margin-left: 0;

margin-bottom: .6em;

padding-top: .75em;

padding-right: 6px;

padding-left: .75em;

padding-bottom: .75em;

cursor: default;

border-left: 4pt solid #339900;

background-color: #F0F0F0; }

Nun noch die Beschreibung wie die erweiterbare Sektion aufgerufen wird:

<a onclick="doSection(sec1,chg1)" class=sidebar href="#nowhere">

<img src="off.gif" ID="chg1" border="0" width="11" height="11">Text für den 
Link</a><DIV CLASS="ts-side" ID="sec1" STYLE="display: none;"

onclick="noSection(sec1,chg1)">

<img src="name.gif" border=0 alt="Name Bild">

<p>Text der Sektion</p>

</DIV>

Sollen mehrere erweiterbare Sektionen eingebunden werden, so müssen die Attribute sec1 und chg1 für jede Sektion eine andere Bezeichnung bekommen. (z.B. sec2,chg2; sec 3,chg3 usw.)

Im <img> Tag wird das jeweilig darzustellende Bild eingetragen; außerdem muss hier noch die Veränderung der Werte für width und height vorgenommen werden. (Werte für Höhe und Breite des jeweiligen Bildes eintragen)

Rubriken

Service

Erweiterbare Sektionen