einblenden / ausblenden
    
 HomeDiverses • ein- ausblenden Beispiel 01   Download 

 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

   17.07.2011 - Adolf-Pichler-Hütte Stubaier Alpen

   07.08.2011 - Adamekhütte Dachsteingebirge

   15.09.2011 - Alpenrosenhütte Zillertaler Alpen




  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










NACH OBEN