Stempelprägung mit Adobe® Photoshop

imageStempelprägung in Fotos mit Adobe® Photoshop erzeugen

 

Die Aufgabe stellt sich oft, die Lösung ist einfach: Wie können Sound-Effekte (beispielsweise Signaltöne) an bestimmte Elemente in HTML-Seiten gekoppelt und automatisch wiedergegeben werden?

 

Beispiel: Noten abspielen

Dieses kleine Notenblatt zeigt den Anfang der Melodie des Kinderliedes Hänschen Klein. Sie können sich die Töne anhören:

  • Zeigen Sie mit der Maus auf die Note im Notenblatt, die Sie hören möchten.

 

alt
 

 

Die Javascript-Funktion

Wir benötigen nur eine einfache Javascript-Funktion, die zwei Kernelemente enthält:

  • einen HTML-String, der die Sound-Datei lädt und ausführt
  • eine Javascript-Anweisung, die den HTML-String dynamisch in die HTML-Seite an den gewünschten Ort einbindet.

image

function show_SoundMessage() {

  var soundfile = "path/soundfile.mp3";

  var sound_id = "soundbox";

  var sound_message = '<embed src="' + soundfile + '" autostart="true" loop="false" hidden="true" height="0" width="0">';

  document.getElementById(sound_id).innerHTML = sound_message;

}

image

Erläuterung:

Der Variablen soundfile weisen wir zunächst den richtigen Dateinamen zu. In der Variablen sound_id wird der id-Wert des HTML-Elements gespeichert, das den dynamischen Inhalt bekommen soll.

Der HTMLString in sound_message bindet die Datei ein (embeded), startet sie automatisch (autostart), spielt sie nur einmal ab (loop), zeigt keine Player-Steuerung an (hidden) und reseviert keinen Anzeigeplatz in der Ausgabe (height, width).

Schließlich wird der HTML-String mit document.getElementById(sound_id).innerHTML in den Inhaltsbereich des Tags geschrieben, der mit sound_id bezeichnet ist.
Vorsicht: Die Funktion überschreibt den Inhaltsbereich des Tags vollständig!

 

Die Funktion in HTML einbinden

Die Javascript-Funktion kann im head-Bereich der HTML-Seite gespeichert werden:

<script type="text/javascript" ><!--

// Hier die Funktion einkopieren!

--></script>

Sie können die Funktion auch in einer gesonderten Datei mit der Endung .js speichern und über den Dateinamen im head-Bereich Ihrer HTMl-Seite einbinden:

<script src="meine_sound_funktion.js" type="text/javascript"></script>

 

Der HTML-Code für den Funktionsaufruf

Nun müssen wir die Funktion aufrufen. Dazu brauchen wir

  • ein HTML-Element mit id
  • und ein auslösendes Ereignis, in diesem Fall ein Maus-Ereignis

Das geht beispielsweise so:

  • <img src="pic.png" alt="" width="32" height="32" onmouseover="show_SoundMessage()">
    <div id="soundbox"></div>
  • <a href="javascript:show_SoundMessage()">Klick mich!</a>
    <td id="soundbox"></td>
  • usw.

Damit sind wir auch schon fertig!

 

Das auslösende Ereignsis

Das auslösende Ereignis ist hier jeweils ein Maus-Ereignis. Selbstverständlich kann es auch das Ergebnis einer Berechung, eines Zählerstandes oder eines Dateiinhalts usw. sein. Das allerdings muss jeweils anwendungsspezifisch programmiert werden.

Unser Notenblatt-Beispiel ist nur geringfügig aufwändiger: Es enthält im Grunde nur diese Funktion, aber sie ist leicht erweitert und arbeitet mit zwei getrennten Ausgaben. Ein Ausgabebereich (id!) nimmt den Sound auf wie oben beschrieben, ein zweiter bekommt gleichzeitig eine Textnachricht. Wird ein Notenbild (png) mit der Maus überfahren (onmouseover) wird abhängig vom Bild eine bestimmte Sound-Datei geladen und es wid eine Nachricht erzeugt. Verlässt die Maus das Bild, wird eine zweite Funktion gerufen, die den Textausgabebereich löscht. Dazu wird ein leerer String an die document-Funktion für den Textbereich – nicht jedoch für den Sound-Bereich! – übergeben.

 

Zusammenfassung

Sound-Dateien können sehr einfach in HTML-Dateien dynamisch eingebunden werden. Dazu sind nötig:

  • ein definiertes, auslösendes Ereignis
  • eine kleine Javascript-Funktion, die aufgerufen wird, wenn das Ereignis eintritt, und den HTML-Code in die HTML-Seite schreibt
  • ein HTML-Element, das mit dem Parameter id eindeutig gekennzeichnet ist, und dessen Inhalt komplett durch den dynamischen Inhalt ersetzt werden kann

Wir haben als individuelle Erweiterungen in unseren Beispiel nur wenige Spezialitäten eingebaut:

  • es werden mehrere unterschiedliche Sound-Dateien geladen und eingebunden
  • es gibt einen zweiten Ausgabebereich, der die Textnachricht ausgibt, aber nach dem selben Muster arbeitet
  • der Textbereich wird gelöscht, sobald ein zweites Ereignis (hier: onmouseout) eintritt.

 

Eigene Ideen

Die Grundlagen für viele Anwendungen sind damit geschaffen. Bespielsweise kann man sich endlich von den nervenden alert-Boxen trennen, die in älteren Seiten sehr beliebt waren, um dem Benutzer einen Hinweis zu geben. Nun ist es sehr einfach möglich, nicht nur eine Nachricht an geeigneter Stelle in das Browser-Fenster zu schreiben; der Benutzer kann gleichzeitig mit einem Signalton darauf aufmerksam gemacht werden.

Allerdings: Zuviel erwarten darf man nicht. Komplexere Anwendungen – und unser Notenblatt-Beispiel gehört schon dazu! – sollte man nicht mit HTML auf diese Weise lösen! Der Browser benötigt zuviel Zeit, um die Informationen zu generieren, zu laden und auszuführen. Zudem unterscheiden sich die Browser darin, wie sie Sound-Dateien behandeln.

Für die Entwicklung komplexer Anwendungen empfiehlt sich Adobe Flash. Die swf-Dateien können zur Laufzeit deutlich einfacher geladen werden und um die Wiedergabe kümmert sich der Flash-Player. Damit ist die zuverlässige Wiedergabe in hoher Qualität (was bei Tönen wichtig sein kann) in allen Browsern, die swf-Dateien unterstützen, sichergstellt.

Viel Erfolg beim Umsetzen Ihrer eigenen Ideen!

 

 

Sabrina & Reiner

 

Webdesign & Layout:

  • ©by Reiner Makohl, Stilkunst™
  • ©by Sabrina, SABRINA CREATIVE DESIGN™