Objekte einblenden / ausblenden 01 Anwendung
Für einige Anwendungsbeispiele habe ich separate Beispiele ohne weitere Erklärungen erstellt. Im Wesentlichen handelt es sich um modifizierte Varianten vorgestellter Beispiele, z.B. durch unterschiedliche CSS-Anweisungen.
|
|
Anwendungsbeispiel - Objekte ein- und ausblenden - Version 01
andere Navigationsleisten
Wenn Sie dem Anwendungsbeispiel in der Version 01 einen anderen 'Look' verleihen möchten, reichen dazu wenige Veränderungen im CSS-Code. So können sie die Vorlagen leicht an ihr Projekt anpassen. Wie das geht, demonstriere ich hier. Die Naviagationsleiste soll mehr Platz für Beschreibungen bieten.
Beispiel Hüttentouren (Texte + Fotos Wikipedia)
Tourinfo: Links anklicken zum Ein- / Ausblenden von Detailinformationen
15.06.2011 - Hochalm-Hütte Mangfallgebirge

Das Mangfallgebirge ist der östlichste Teil der Bayerischen Voralpen, die ihrerseits zu den Nördlichen Kalkalpen gehören. Namensgebend ist die Mangfall, die über ihre Zuflüsse Rottach, Weißach, Schlierach und Leitzach große Teile des Gebiets entwässert und ein wichtiges Trinkwasserreservoir für München bildet.
Die Gebirgsregion ist im Westen durch das Isartal und im Osten durch das Inntal, sowie im Süden durch die Brandenberger Alpen (den Rofan), bzw. durch die österreichische Staatsgrenze begrenzt. Nördlich des Mangfallgebirges schließt sich das Alpenvorland an. Das Gebiet hat eine Fläche von 752,40 km², nach engerer Abgrenzung nur 333 km².
Das Mangfallgebirge wird in die Tegernseer Berge (von der Isar bis zur Linie Tegernsee-Rottach-Weiße Valepp), Schlierseer Berge (bis zum Leitzachtal) und die Wendelsteingruppe (zwischen Leitzachtal, Ursprungstal und Inntal) unterteilt.
| Termin |
Gipfel |
Start |
Infos |
Führung |
| 15. Juni |
1430 m |
8 Uhr
|
Leichte bis mittlere Bergwanderung
Höhendifferenz: 630 m Zeit: 4 Std |
30,- € |
Detailinfo ausblenden
17.07.2011 - Adolf-Pichler-Hütte Stubaier Alpen

Die Adolf-Pichler-Hütte ist eine Schutzhütte des Akademischen Alpenklubs Innsbruck (AAKI); sie liegt auf 1.977 m am Fuße der Kalkkögel in den Stubaier Alpen. Erbaut wurde die Hütte vom Akademischen Alpenklub Innsbruck in den Jahren 1903 und 1904, benannt wurde sie nach dem Tiroler Schriftsteller und Geologen Adolf Pichler.
Zustieg
Vom Parkplatz der Kemater Alm (1.673 m) dauert der Anstieg eine Stunde. Von Grinzens (928 m) beträgt die Gehzeit drei Stunden.
Übergänge
- über den Hoadl zur Axamer Lizum 1,5 Stunden
- Starkenburger Hütte über Seejöchl 2 Stunden
- Potsdamer Hütte 3,5 Stunden
- Franz-Senn-Hütte über das Sendersjöchl 6 Stunden
- über die Alpenklubscharte zur Schlicker Alm 2,5 Stunden
Bergtouren
- Sonntagsköpfl (2.096 m), 0,5 Stunden Gehzeit
- Kleine Ochsenwand (2.553 m), 1 Stunde 45 Minuten Gehzeit
- Hoadl (2.340 m) 1 Stunde 45 Minuten Gehzeit
- Steingrubenkogel (2.633 m), 2 Stunden 30 Minuten Gehzeit
- Hochtennspitze (2.549 m), 2 Stunden 30 Minuten Gehzeit
- Gamskogel (2.659 m), 2 Stunden 45 Minuten Gehzeit
- Ampferstein (2.556 m), 3 Stunden Gehzeit
- Marchreisenspitze (2.620 m), 3 Stunden Gehzeit
- Malgrubenspitze (2.571 m), 3 Stunden Gehzeit
- Große Ochsenwand (2.700 m), 3 Stunden Gehzeit
- Schlicker Seespitze (2.804 m), 3 Stunden 15 Minuten Gehzeit
- Riepenwand (2.770 m), 3 Stunden 30 Minuten Gehzeit
Detailinfo ausblenden
07.08.2011 - Adamekhütte Dachsteingebirge

Die Adamekhütte ist eine Alpenvereinshütte des OeAV in 2.196 Meter Höhe, unterhalb des Gosaugletschers, am Fuß des Hohen Dachstein. Sie befindet sich damit im Dachsteingebirge in Oberösterreich hoch über dem Tal von Gosau in der UNESCO-Welterberegion Hallstatt. Aufgrund der großen Höhe ist die Adamekhütte kein Ziel von Tageswanderern, sondern vielmehr ein bedeutender Stützpunkt für Bergsteiger, die von hier aus größere Berg-, Gletscher-, und Klettertouren am Dachstein unternehmen können.
Die 1908 von der Sektion Austria errichtete Hütte wurde nach dem Vorstand Karl von Adamek benannt. Zuvor gab es wohl lediglich einen dürftigen Unterstand, die Grobgesteinhütte, dessen Reste heute noch am Hüttenweg in 1.638 Metern erkennbar sind. Die Adamekhütte wurde mehrmals erweitert und renoviert, von ihrem einmaligen Standort bietet sich ein großartiger Tiefblick auf die Gosauseen sowie eine Fernsicht zu den Hohen Tauern und zur Bischofsmütze an.
Zugänge
- Vom Vorderen Gosausee (930 m, Parkplatz) über Hinteren Gosausee und Hüttenweg, mittel, Gehzeit: 4 Stunden
- Vom Hunerkogel (2.680 m, Dachstein-Südwandbahn) über Steinerscharte und Gosaugletscher, nur für Geübte mit entsprechender Ausrüstung, Stellen I nach UIAA, teilweise gesichert, Gehzeit: 2,5 Stunden
- Von der Bachlalm (Mautstraße bis 1.400 m) bei Ramsau über die Windlegerscharte, nur für Geübte, Stellen I nach UIAA, teilweise gesichert, Gehzeit: 4 Stunden
- Von der Oberhofalm (1.260 m, Parkplatz) bei Filzmoos über den Linzer Weg, nur für Geübte, Stellen I nach UIAA, teilweise gesichert, Gehzeit: 5 Stunden
Übergänge
- Hofpürglhütte (1.705 m) über Linzer Weg und Reißgangscharte, nur für Geübte, Stellen I nach UIAA, teilweise gesichert, Gehzeit: 4 Stunden
- Simonyhütte (2.205 m)
- über Hoßwandscharte und Hohen Trog, mittel, Gehzeit: 4-5 Stunden
- über Steinerscharte und Gletscher, nur für Geübte mit entsprechender Ausrüstung, Stellen I nach UIAA, teilweise gesichert, Gehzeit: 3,5 Stunden
- Seethalerhütte (2.740 m) über Steinerscharte und Gletscher, nur für Geübte mit entsprechender Ausrüstung, Stellen I nach UIAA, teilweise gesichert, Gehzeit: 3 Stunden
- Dachsteinsüdwandhütte (1.910 m) über Windlegerscharte, Tor und Pernerweg, Stellen I nach UIAA, teilweise gesichert, Gehzeit: 4 Stunden
Detailinfo ausblenden
15.09.2011 - Alpenrosenhütte Zillertaler Alpen
Die Alpenrosenhütte liegt auf 1.878 m ü. A. im Zemmgrund bei der Waxeggalm im Naturpark Zillertaler Alpen. Die Hütte liegt unterhalb der Berliner Hütte und in der Nähe des Berliner Höhenwegs. In der Umgebung befinden sich mehrere Dreitausendergipfel und der Schwarzsee auf 2.472 m Höhe.
Unterhalb der Hütte befindet sich ein Wehr, das den Zemmbach staut. Das Wasser wird durch einen Stollen unter dem Schönbichl und Großen Greiner zum Schlegeisspeicher geleitet.
Zugang und Übergänge
Der Zugang zur Hütte durch den Zemmgrund erfolgt vom Gasthaus Breitlahner bei Ginzling in etwa zweieinhalb Stunden Gehzeit. Über den Berliner Höhenweg ist die Hütte vom Furtschaglhaus über die höchste Stelle des Berliner Höhenwegs, das Schönbichler Horn in etwa sechs Stunden zu erreichen.
Detailinfo ausblenden
Aufbau
- 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.
Grundsätzliche Erklärungen entnehmen Sie bitte der Seite Ein- Ausblenden 01
Anpassungen:
Das Menü und die Anzeigeboxen stehen innnerhalb eines DIV-Bereichs mit der ID #Touren, der die Gesamtbreite festlegt. Die CSS-formatierten Textlinks habe ich in Absetze (CSS-Klasse 'linkleiste') eingefasst um in allen Browsern eine Hintergrundfarbe über die gesamte Breite zu realisieren. Für eine Tabelle und ein links ausgerichtes Foto innerhalb der Anzeigebox habe ich ebenfalls CSS-Formatierungen notiert.
HTML-Code im Body
<!-- Anfang Touren width:550px; -->
<div id="Touren">
<!-- Link 1 -->
<p class="linkleiste">
<a onfocus="this.blur()" onclick="return toggleMe('Box01')" href="javascript:void(0)">
15.06.2011 - Hochalm-Hütte Mangfallgebirge
</a>
</p>
<!-- Box 1 -->
<div style="display:none;" class="dbox" id="Box01">
<img class="FotoLinks" src="foto.jpg" width="150" height="113" border="0" alt="">
Das Mangfallgebirge ist der östlichste Teil ...
<br><br>
Die Gebirgsregion ist im Westen durch das Isartal ...<br><br>
Das Mangfallgebirge wird in die Tegernseer Berge ...<br><br>
</div>
<!-- Ende Box 01 -->
...
</div>
Script im Head
<script type="text/javascript" language="JavaScript">
<!--
function toggleMe(BoxId){
var e=document.getElementById(BoxId);
if(!e)return true;
if(e.style.display=="none")
{
e.style.display="block";
return true;
}
if(e.style.display=="block")
{
e.style.display="none";
return true;
}
}
//-->
</script>
CSS-Anweisungen im Head
<style type="text/css">
<!--
#Touren
{
width:550px;
}
/* für die Boxen */
.dbox{
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
font-weight:normal;
color: #2F2F2F;
background-color:#FFFFFF;
line-height:130%;
margin: 15px 0px 25px 0px;
border-bottom:1px dotted #00468C;
}
.dboxTab{
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
color: #2F2F2F;
background-color:#FFFFFF;
line-height:130%;
margin-top: 15px;
}
.dboxTab td{
text-align:left;
vertical-align:top;
color: #2F2F2F;
padding:5px;
}
.TabKopfzeile td{
padding:5px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
color: #00468C;
border-top:1px solid #00468C;
border-bottom:1px solid #00468C;
line-height:130%;
}
.FotoLinks{
float:left;
margin:0px 15px 15px 0px;
border:6px solid #BFBFBF;
}
/* für die Linkleisten */
p.linkleiste {
width:100%;
padding:3px;
color:#00468C;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:normal;
background-color:#A6CAD6;
border-bottom:1px solid #838C19;
margin:0px 0px 4px 0px;
}
.linkleiste a:link {
color:#00468C;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:normal;
text-decoration:none;
text-transform:none;
}
.linkleiste a:visited {
color:#00468C;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:normal;
text-decoration:none;
text-transform:none;
}
.linkleiste a:hover{
color:#FFFFFF;
font-size:11px;
text-decoration:none;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform:none;
}
-->
</style>
Allgemeine Erklärungen zu CSS-Formatierungen lesen sie in der Rubrik CSS, unter dem Menüpunkt 'CSS-Einführung'. Dort gibts 13 Seiten zum Thema
CSS-Einführung
e) Grafiken (rechtsklicken zum Download)
Mehr als 8000 Grafiken finden Sie zum kostenlosen Download in meiner MINI-IMAGE-Box 

Objekte ein- / ausblenden Version 01
Objekte ein- / ausblenden Version 02

|