Diashow 02 - manuell / auto
    
HOME
BEISPIEL   DOWNLOAD ZIP   Quellcode  ZURÜCK SITEMAP  

 Diashow 02-A - manuell / auto

Automatisch oder manuell gesteueter Bildwechsel für Grafiken und Fotos. Die Slideshow kann per Mausklick angehalten und fortgesetzt werden. Außerdem kann eine Auswahl per PullDown-Menü erfolgen.
Bildpräsentation - automatisch und manuell steuerbar

Da gibts nicht viel zu sagen. Hier hat man alles was man möchte:
  • automatisches Blättern / Diashow mit Start- Stop-Funktion
  • einstellbare Zeit für die Anzeigeintervalle bei Auto-Play
  • manuelle Blättern-Funktion / manuelle Steuerung
  • gezielte Auswahl der Grafiken (Bildbeschreibung) im Pulldownmenü


  die eingesetzten Funktionen

für manuelle Steuerung:

naechstes()  nächstes Bild
vorheriges()  vorheriges Bild
letztes()  letztes Bild
erstes()  erstes Bild

werden mit einem Klick auf den entsprechenden Formularbutton oder durch eine Auswahl im Pulldownmenü aufgerufen.

für die automatische Steuerung:

automatisch()  auto play
rotieren()  für Zeitinterval


für die Auswhl im Pulldownmenü:

wechseln()  Bild tauschen
Jahr in Bildern Diashow 02





    


  Voraussetzungen für die Funktion des Beispiels

  • Die im Formular eingebundene Grafik hat den Namen 'Bild'
  • Die Grafiken haben identische Abmessungen (Breite + Höhe)

  Sie können zusätzlich

  • die Formularbuttons mittels CSS dem Layout anpassen
  • das Pull-Down-Menü mittels CSS dem Layout anpassen
  • in der Tabellenzelle ein Hintergrundbild notieren
Demo ohne Formatierung

    

Oben sehen Sie die Formularelemente, wie Sie im HTML-Dokument üblicherweise erscheinen. Rechts wurde die Formatierung mit CSS festgelegt für:
  • Schrift
  • Schriftgröße
  • Ränder
  • Randfarbe
  • Elemetbreite
  • Elementhöhe
 Demo zur Formatierung mit CSS

Sportschau

    
(ohne Funktion)
   CSS-Anweisungen

für die Unterkassen der Formularelemente eingetragen mit:

<select class="pull01" ...    <input class="butt01" ... 


<style type="text/css">
<!--
.pull01 {
font-family:Verdana,sans;
font-size:11px;
text-align: center;
margin:1px;
border:1px solid #00AD66;
background-color: #D2E5D1;
width:218px;
height:22px;
padding:1px;
vertical-align:middle;
}

.butt01 {
font-family:Verdana,sans;
font-size: 11px;
cursor: hand;
text-align: center;
border-style: 1px solid #006A00;
background-color: #CFF0CE;
width:40px;
height:20px;
vertical-align: middle;
}
-->
</style>



   Weitere Demo - Formatierung der Buttons

Demo CSS-Formatierung 
<input class="blau01" type="button"
  

.blau01 {
 height:18px;
 width:80px;
 font-family:Verdana,sans;
 font-size:10px;
 color:#FFFFFF;
 border:none;
 border-bottom:1px solid #1D56A7;
 border-right:1px solid #1D56A7;
 background-image:url(b200-16.gif);
 cursor: hand;
}
  Demo CSS-Formatierung 
<input class="blau02" type="button"
  
.blau02 {
 font-family:Verdana,sans-seif;
 font-size:11px;
 color:#FFFFFF;
 text-align:center;
 border-style:1px solid #006A00;
 background-color: #7AB9EF;
 width:80px;
 height:20px;
 vertical-align: middle;
 cursor:hand;
}
Für die Formatierung der Buttons können Sie CSS-Anweisungen notieren für:
  • Schrift
  • Schriftgröße
  • Ränder
  • Randfarbe
  • Elemetbreite
  • Elementhöhe
  • Hintergrund


 Möchten Sie das Script auf einer Seite 2 mal einsetzen? Diashow 03   





18.07.2002   
NACH OBEN