Wenn man HTML Seiten erstellt, kann es vorkommen, dass man Bilder in eine Seite einbindet, die nicht angezeigt werden können. Mögliche Gründe sind z.B. Schreibfehler im Quellcode oder vielleicht, dass die Bilddatei verschoben oder gelöscht wurde. Im Browser wird dann anstatt eines Bildes ein Platzhalter angezeigt. Je nach Browser sieht das dann etwa so aus:
Man kann das aber mit JavaScript abfangen. Mit dem Event-Handler onError
kann man dafür sorgen, dass im Falle eines Ladefehlers ein alternatives Bild geladen wird. Dieser Handler wird einfach in den img-Tag geschrieben und fängt somit einen Ladefehler ab.
Das folgende Beispiel zeigt, wie es geht: es soll mittels img-Tag eine jpg-Datei mit dem Namen fehlendesBild.jpg eingebunden werden.
Funktioniert dies nicht, so wird im Event-Handler onError
mittels JavaScript die Datei ersatzbild.jpg geladen. Dieses könnte z.B. eine neutrale Grafik sein, z.B. mit der Beschriftung “Bild nicht vorhanden”.
Hier ein kleines Code-Beispiel:
<img src="fehlendesBild.jpg" onError="this.src=’ersatzbild.jpg’;" alt="Fehlendes Bild"> |