ALT-Textgrösse

Was für eine Alt-Textgröße? Alt ist ein Attribut für Image-Tags und sollte nicht sichtbar ausgegeben werden. Wenn es dann doch im FF bei Dir sichtbar ausgegeben wird, dann ist Dein HTML zerschossen. In älteren Browsern wurde der Wert des alt-Attributes noch als kleiner Hinweis beim Überfahren mit der Maus angezeigt, doch mit neueren Browser wohl auch nicht mehr.
.

Melewo
Das alt-Attribut wird selbstverständlich angezeigt, und zwar immer dann, wenn das Bild selbst, aus welchen Gründen auch immer, nicht angezeigt werden kann. Dafür ist es ja da.

Warum der IE es nicht mit der richtigen Größe darstellt, weiß wohl nur Microsoft. :-)
Vielleicht hilft es ja, dem img-Tag die Formatierung zu verpassen, also das style="..." dort einzutragen.

Gruß
Ingo

Zitat von Putzlowitsch

Das alt-Attribut wird selbstverständlich angezeigt, und zwar immer dann, wenn das Bild selbst, aus welchen Gründen auch immer, nicht angezeigt werden kann. Dafür ist es ja da.

Ja, da hast Du selbstverständlich recht, doch auf diesen Gedanken wäre ich jetzt nicht gekommen, nicht alles zu tun um eine deartige Ausgabe zu verhindern. Denn letztendlich handelt es sich dabei um einen Error, den auch ein onError EventHandler als Fehler bestätigen würde und um keine Lösung, die für etwas anderes als eine Fehlermitteilung vorgesehen ist. Zumindest ursprünglich nicht. Und wie ein Browser die Fehlermitteilungen anzeigt, bleibt weitestgehend dem Browser überlassen.
Beispiel:

<script type="text/javascript">
document.write("<img src=\"fehle.jpg\" onError=\"this.src = 'ersatzbild.jpg';\">");
</script>

Wesentlich besser wäre es hingegen, mit PHP das irgendwie zu überprüfen und einen richtigen Ersatz zu liefern. Mit der Überprüfung von Images von entfernten Servern hatte ich mich mal beschäftigt, da genügt eine Abfrage mit getimagesize, doch wie das nun bei Live-Stream überprüft werden könnte, weiß ich nicht so genau, damit habe ich mich noch nicht beschäftigt.

Habe nichts gefunden, doch so in etwa würde ich da mit der Suche fortfahren, wobei Du zuerst das gelieferte Format kennen müsstest und ob sich da etwas mit PHP abfragen lässt, der Rest wäre dann eventuell einfacher. Ist deshalb nur ein Ansatz, mehr nicht und könnte im Endergebnis völlig anders aussehen.

$mimetype = "MIME-Type???";


if($mimetype != false){


    echo "<img alt=\"Webcam\" width=\"960\" height=\"540\" 
             src=\"http://xxx.net:8015/?action=stream\" />";
}  
else {
    echo "Lade Ersatz oder formatierten String.";
}

Nein, das Alt-Attribut ist ja dafür gedacht, etwas anzuzeigen, falls ein Bild nicht angezeigt werden kann oder soll, z.B. bei Text-Browsern oder Screenreadern. Da ist es ja nicht sinnvoll, alternativ ein Bild anzeigen zu wollen, weil auch das ja nicht angezeigt werden kann.

Insofern hat Melewo schon recht, ein beabsichtiges Nichtanzeigen eines Bildes sollte man nicht mit dem alt-Attribut behandeln, sondern irgendwie anders.

Gruß
Ingo

Na ja, Du kannst alles machen, ich möchte Dir hier nur keinen invaliden Mist andrehen. Am einfachsten wäre sicherlich ein Eventhandler, der ist aber im Image-Element nach HTML nicht erlaubt, doch nach JavaScript soll der erlaubt sein, deshalb hatte ich das obige Beispiel vor Jahren mal so geschrieben.

Nach einer PHP-Lösung werde ich nicht weiter suchen, vielleicht stolpere ich da mal durch Zufall über eine, es sei denn, dieser MIME-Type ließe sich mit getimagesize abfragen. Eine JavaScript-Lösung würde ich heute anders angehen, die würde ich zum Beispiel beim Theme Twenty Twelve unten in der navigations.js mit reinschreiben. Alles was das Bild dann zusätzlich benötigen würde, das wäre eine richtige ID, wie id="webcam" oder so.

<img id="webcam" alt="Bilder von der Webcam" width="960" height="540" src="http://xxx.net:8015/?action=stream" />

Unten in der navigations.js falls vorhanden oder in einer andere, möglichst bereits im Footer vorhandene JS-Datei dann den Code mit einfügen und kein zu großes Bild dafür verwenden.

var bildelement = document.getElementById("webcam");


bildelement.onerror = function() {


    bildelement.src = "der_richtige_pfad/ein_kleineres_ersatzbild.jpg";
    bildelement.style.width  = "500px";
    bildelement.style.height = "378px";
}

Kann das nicht abschließend testen, da ich ja hier keine Webcam zur Hand habe, doch unter Localhost wird das Ersatzbild nach einer Verzögerungszeit von 2 bis 3 Sekunden geladen. Diese Zeit wird wohl für den fehlerhaften Request verplempert, da ja zuerst eine Anfrage wegen dem eigentlichen Bild vom Browser an den Server gesendet wird, so dass es mit PHP eigentlich zügiger gehen sollte.

Screenreader sollten den alt-Text eigentlich weiterhin lesen können, der wird ja nicht überschrieben und bleibt dem Bild weiterhin zugeordnet, kann ich aber auch nicht richtig testen. Zumindest ordnet der FF den Text weiterhin dem Bild zu.

Da fällt mir eigentlich nur noch was in Richtung CSS und Background-Image ein.
Ungefähr so:

<img alt="" width="960" height="540" src="http://xxx.net:8015/?action=stream" 
style="background-image:url(http://xxx.net/hinweisbild.gif);"/>

Gruß
Ingo

Zitat von filmer11

Im IE, wo der Text ja permanent angezeigt werden muss, wird dieser nur sehr klein und schwer lesbar angezeigt.

Und nun noch einmal, sei froh, dass die Browser nicht mehr so auf diese Fehlermitteilung reagieren, wie in den Jahren zuvor. Heute werden nur noch dezent gestaltete Bildchen und Hinweise ausgegeben, keine leuchtend roten Warnkreuze mehr. Ich weiß jetzt nicht ab welchen Browserversionen, doch irgendwie sollte man schon versuchen ein wenig abwärtskompatibel zu bleiben.

Und wenn Du von vornherein weißt, dass das so im IE nicht ausgegeben werden kann, warum baust Du das so ein, wo Du doch nur einmal den Begriff Browserweiche in den Suchschlitz einer Suchmaschine eingeben müsstest? Dann kannst du in Abhängigkeit vom Browser entscheiden, ob Du das als Objekt oder Inline-Element mit dem Image-Tag einfügst und vielleicht gibt es auch eine Lösung, die alle Browser verstehen.

Sicher hatte ich gestern auch etwas gesucht, obwohl ich ja nicht vor diesem Problem stehe, sondern Du und habe zum Beispiel auf Anhieb Hinweise für eine Einbindung als Objekt oder per iFrame gefunden.
Für die Auslieferung ist aber eine PHP Lösung der bessere Weg, um erst gar nichts in HTML zu referenzieren, was nicht erreichbar ist. Doch es liegt an Dir Dich mal nach dem MIME-Typ zu erkundigen, damit wirst Du wohl auch nicht überfordert sein.

So und da ich heute auch noch einmal etwas suchte, bin ich über einen Lösungsansatz gestolpert, der sich ebenfalls mit JS bewerkstelligen lassen sollte und der noch besser funktionieren sollte, als meiner. Und zwar wird zuerst ein richtiges Bild in HTML eingebunden und erst nach onload durch das Bild von der Webcam ersetzt, falls diese erreichbar ist. Falls diese nicht erreichbar ist, wird dann ein anderes Standbild eingebunden.

Dennoch würde ich mich mal über eine Einbindung als Objekt erkundigen, ob das dann nicht in allen Browsern geladen wird. Wie man Bilder auch mit JS sauber austauschen kann, hatte ich mal hier beschrieben: Clientseitige Möglichkeiten
Der Zusammenhang war zwar ein anderer, doch das Prinzip ändert sich jedoch nicht grundlegend.

Funktioniert ohne störende Übergänge, habe es jetzt jedoch nur mit dieser fiktiven xxx.net:8015 probiert, so dass ich keinen abschließenden Test durchführen kann.

Also, Vorschaubild einbinden, bei onload erfolgt ein verzögerungsfreier Austausch gegen die Bilder von der Webcam oder es wird dafür ein Ersatzbild geladen. Der Alt-Text wird weiterhin zugeordnet, Screenreader sollten diesen lesen können, jedoch nicht mehr sichtbar ausgegeben. Einbindung erfolgt wie bereits beschrieben:

<img id="webcam" alt="Bilder von der Webcam" width="500" height="378" src="vorschaubild.jpg" />

Und:

var bildelement = document.getElementById("webcam");


window.onload = function() {


    bildelement.src = "http://xxx.net:8015/?action=stream";
    bildelement.style.width  = "960px";
    bildelement.style.height = "540px";
    
    bildelement.onerror = function() {


        bildelement.src = "ersatzbild.jpg";
        bildelement.style.width  = "500px";
        bildelement.style.height = "378px";
    }    
}

Probleme könnte es dann geben, wenn Deine Seite bereits weitere onload Funktionen oder gleichnamige Bezeichner benutzt, dann wäre wohl eine Registrierung sinnvoll, ansonsten sollte eine einfache Einbindung in eine bereits vorhandene JS-Datei genügen.

Danke für die Nachrichten, doch ich beantworte mal die Frage lieber hier, falls noch ein anderer Probleme mit der Einbindung haben sollte. Einen JavaScript-Code kann man nicht einfach in eine HTML- oder PHP-Seite einfügen, sondern nur in eine JavaScript-Datei oder in dem innerhalb einer HTML-Seite ein Script-Bereich angelegt wird. Ab HTML5 kann die Type-Angabe entfallen, um abwärtskompatibel zu bleiben, würde ich diese aber weiterhin benutzen.

<script type="text/javascript">
Hier den Code notieren...
</script>

Bei WP hätte ich ohnehin Bedenken, einen JS-Code einfach so in eine Datei zu schreiben, dafür gibt es bessere Möglichkeiten zum Hinzufügen. Da aber Themen wie Twenty Twelve bereits JS-Dateien im Footer einbinden, kann man diese JS-Datei auch gleich dafür nutzen und braucht in diesen dann halt keinen Script-Bereich anzulegen. Es ist nicht erforderlich für jedes kleine JavaScript eine eigenständige JavaScript-Datei anzulegen und einzubinden.

filmer11,

stelle doch bitte Deine Fragen im Forum. Fehler zu machen ist keine Schande und ein anderer hätte eventuell gestern auf den ersten Blick den Fehler erkannt und Du wärst bereits einen Schritt weiter. Ist bestimmt schon jeden einmal passiert (mir das letzte Mal erst vor wenigen Tagen), dass http:// doppelt eingefügt wurde. Wenn Du das bereinigst, so sollte es funktionieren.

http://http://

Zitat von filmer11

Habe den Code in die navigation.js eingefügt und den img-Aufruf in die Beitragsseite.
Leider kommt auch bei laufender Webcam immer nur das vorschaubild.jpg, kein Live-Bild.

Code

/**
 * navigation.js
 *
 * Handles toggling the navigation menu for small screens.
 */
( function() {
    var container = document.getElementById( 'access' ),
        button    = container.getElementsByTagName( 'h1' )[0],
        menu      = container.getElementsByTagName( 'ul' )[0];


    if ( undefined == button || undefined == menu )
        return false;


    button.onclick = function() {
        if ( -1 == menu.className.indexOf( 'nav-menu' ) )
            menu.className = 'nav-menu';


        if ( -1 != button.className.indexOf( 'toggled-on' ) ) {
            button.className = button.className.replace( ' toggled-on', '' );
            menu.className = menu.className.replace( ' toggled-on', '' );
            container.className = container.className.replace( 'main-small-navigation', 'navigation-main' );
        } else {
            button.className += ' toggled-on';
            menu.className += ' toggled-on';
            container.className = container.className.replace( 'navigation-main', 'main-small-navigation' );
        }
    };


[COLOR=#ff0000]var bildelement = document.getElementById("webcam");


window.onload = function() {


    bildelement.src = "http://xxx.net:8045/?action=stream";
    bildelement.style.width  = "960px";
    bildelement.style.height = "544px";
    
    bildelement.onerror = function() {


        bildelement.src = "http://xxx/images/ersatz.png";
        bildelement.style.width  = "500px";
        bildelement.style.height = "378px";
    }    
}[/COLOR]
    // Hide menu toggle button if menu is empty.
    if ( ! menu.childNodes.length )
        button.style.display = 'none';
} )();

Alles anzeigen

Du hast die Funktion zwar wie empfohlen in eine vorhandene JS-Datei mit eingefügt, Du hast den Code zusätzlich aber noch in einer in dieser Datei bereits vorhandenen Funktion mit eingefügt. Hatte ich auf dem Screenshot nicht gesehen oder übersehen. Jedenfalls kann das nicht gut gehen.

Notiere den Code mal über oder unter der vorhandenen Funktion.

/**
 * navigation.js
 *
 * Handles toggling the navigation menu for small screens.
 */
( function() {


  /* Im Bereich einer bestehenden Funktions nichts einfügen */
  
} )();


/* Hier können noch tausend Zeilen eingefügt werden. */

Nur bei deaktivierten JavaScript, da ja ansonsten das Bild von der Webcam oder das Ersatzbild bei window.onload (wenn das Browser-Fenster fertig aufgebaut ist) geladen wird. Ich kenne nur keinen Browser mehr, in dem JavaScript mal kurz deaktiviert werden könnte, da die Einstellmöglichkeit auch im Firefox 23 abgeschafft wurde und eine Deaktivierung nur noch über "about:config" oder entsprechende Add-ons möglich ist. Somit sollten das erste Bild eigentlich nur einige hartgesottene JavaScript-Verweigerer zu sehen bekommen.