turnOver

Programm zum Umblättern von Musik-Notenblättern

Version 1.10, © Gerhard Schacherl, 2021

Voll responsive, auch nach Drehung des Displays

Slider-CSS mit Hilfe des Online-Tools auf cssportal.com

Programm - Bedienung

Seitentitel


Im Seitentitel ist die Anzahl der Seiten sichtbar

Umblättern

Button Seitennummer

Linksklick auf Button Seitennummer

Blendet transparenten Slider "Gehe zu Seite ..." ein/aus:
Klick auf "OK"-Button (od. Klick auf Button Seitennummer) blendet den Slider wieder aus.

 

Wenn eine Drop-Down-Liste vorhanden ist, kann das so aussehen:


Klick auf die Drop-Down-Liste bewirkt Sprung zur entsprechenden Seite.
Anschließend wird das Feld automatisch ausgeblendet.

Rechtsklick auf Button Seitennummer

Geht zu Seite 1 (ev. Inhaltsverzeichnis!)

Button Index


Führt auf die Index-Seite zurück

Button "x" (wenn vorhanden)


Versteckt/zeigt alle Buttons

Auch versteckte Buttons bleiben funktionsfähig und können angeklickt werden!

Audio MP3 (wenn vorhanden)

Wenn ein MP3 vorhanden ist, erscheint der HTML5-Player rechts oben.
Das Erscheinungsbild ist je nach Browser unterschiedlich.

Demo

J. S. Bach, Präludium und Fuge g-moll

Minimal-Variante, Buttons ständig sichtbar, Inhaltsverzeichnis, Hochformat

Nein, aber nein - Chorsatz

Button "x", Hochformat

G. F. Händel, Sonate F-Dur

Erweiterte Variante mit mehreren Möglichkeiten: Button "x", Buttons zunächst unsichtbar bzw. leicht durchscheinend, Kapitelmarkierungen, Querformat

Klavierbüchlein für Friedemann Bach

Erweiterte Variante mit allen Möglichkeiten incl. MP3

Eigene Projekte

Minimal

Für eigene Projekte sind minimale Kenntnisse über das Erstellen von Internetseiten notwendig.

Benötigt werden Bilder, eine *.html-Seite, turnOver.css und turnOver.js

In die *.html-Seite müssen nur die eigenen Bilder (siehe Beispiel unten) eingebaut werden.

Die maximale Seitenzahl im Slider "seitenwahl" wird automatisch angepasst.

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="turnOver.css">
</head>

<body>


<img src="bilder/klavierbuechlein/klavierbuechlein_deckblatt.jpg">
<img src="bilder/klavierbuechlein/bwv0926_01.jpg">
<img src="bilder/klavierbuechlein/bwv0926_02.jpg">
<img src="bilder/klavierbuechlein/bwv0927.jpg">



<button id="seitenNr" onclick="has('seitenwahl'); this.blur(); event.stopPropagation();">1</button>
<button id="zurueck" onclick="history.back()">←</button>

<div id="seitenwahl" style="display:none;">
	<p>
		<label id="seitenwahlLabel"></label>
		<label id="rangeLabel">1</label>
		<input type="range" id="seitenwahlRange" value="1" min="1" max="10" 
			oninput="geheZu(this.value);" />
	</p>
</div>


<script src="turnOver.js"></script>

</body>
</html>

Erweitert

Benötigt werden Bilder, eine *.html-Seite, turnOver.css und turnOver.js
Audio-Dateien MP3 (optional)

Bilder

Bilder wie bei Minimal-Variante

Kapitelmarkierungen

Anstelle oder zusätzlich zum Inhaltsverzeichnis könnten Kapitelmarkierungen in eine Drop-Down-Liste geschrieben werden. (value="2" entspricht der Seitenzahl 2)

Audio MP3

HTML5 Audio (MP3)
ANMERKUNG: Bei Verwendung von Audio-Dateien empfiehlt es sich, als erste Seite ein Inhaltsverzeichnis o. ä. einzusetzen. Audio-Dateien werden nur aufgerufen, wenn die Drop-Downliste betätigt wird. Beim bloßen Umblättern ändert sich nichts.
Jedes Audio-Element muss eine ID erhalten, die dem relativen Pfad + Dateiname (ohne Endung) des zugehörigen Bildes entspricht.

Buttons verstecken

Mit einem zusätzlichen Button können alle Buttons versteckt/gezeigt werden. Auch versteckte Buttons bleiben funktionsfähig!

Grad der Transparenz von Buttons

Die Durchsichtigkeit der Buttons ist einstellbar:
opacity1=0; (unsichtbar), opacity2=1; (deckend),
Zwischenwerte möglich, Standard (wenn nichts angegeben):
opacity1=0.5; opacity2=0;
Werte für eine Seite, bei der die Buttons anfangs unsichtbar sind:
opacity1=0; opacity2=0.5;

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="turnOver.css">
</head>

<body>


<img src="bilder/klavierbuechlein/klavierbuechlein_deckblatt.jpg">
<img src="bilder/klavierbuechlein/bwv0926_01.jpg">
<img src="bilder/klavierbuechlein/bwv0926_02.jpg">
<img src="bilder/klavierbuechlein/bwv0927.jpg">



<audio id="bilder/klavierbuechlein/bwv0926_01" controls>
  <source src="bilder/klavierbuechlein/bwv926.mp3" type="audio/mpeg">
</audio> 
<audio id="bilder/klavierbuechlein/bwv0927" controls>
  <source src="bilder/klavierbuechlein/bwv927.mp3" type="audio/mpeg">
</audio> 


<button id="seitenNr" onclick="has('seitenwahl'); this.blur(); event.stopPropagation();">1</button>
<button id="zurueck" onclick="history.back()">←</button>
<button id="x">x</button>

<div id="seitenwahl" style="display:none;">
	<p>
		<label id="seitenwahlLabel"></label>
		<label id="rangeLabel">1</label>
		<input type="range" id="seitenwahlRange" value="1" min="1" max="10" 
			oninput="geheZu(this.value);" />
	</p>
</div>

<div id="seitenwahl2">
	<select onclick="event.stopPropagation();" onchange="var sNr=this.value; geheZu(eval(sNr)); this.blur();">
	<option value="1">--- Klavierbüchlein ---</option>
	<option value="1">Praeludium D-Moll, BWV 926</option>
	<option value="2">Praeambulum F-Dur, BWV 927</option>
	</select>
</div>


<script src="turnOver.js"></script>
<script>
opacity1=0;
opacity2=0.2;
</script>


</body>
</html>

Download

HTML-Grundgerüst als Textdatei

turnOver.css

turnOver.js