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

 Diashow 02 - 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 Pull-Down-menü erfolgen.

   Version 02

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>


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






NACH OBEN