PS-Trainer
Das HTML-Element <object> @ PS-Trainer
Was kann dieses relativ neue HTML-tag
Homepage von PS-Trainer - Webdesign - an PS-Trainer
PS-Trainer
Das relativ neue, jedoch sehr mächtige <object>-Element erlaubt es, allgemeine "Objekte" in eine Webseite einzubinden. Damit können Bilder, Multimedia-Dateien, etc. eingebunden werden, aber auch einfache Texte und sogar HTML-Code-Teile. Dieses tag steht seit HTML 4.0 bzw. XHTML 1.0 zur Verfügung.

Inhalt:     Syntax (Grammatik)
Atttribute des <object>-tags
Anwendung Text
Anwendung HTML
Anwendung Bild
Anwendung Sound
Hinweise
Programmierung des <object>-tags

Syntax (Grammatik) des <object>-tags:
<object attname="attvalue" ... ...>Alternativ-Code</object>
Dem tag-Namen object folgen sämtliche Attribute, welche das engebettete Objekt beschreiben, jeweils als Paare Name="Wert".

Wichtige Attribute:
data: URL des Objekts, d.h. jener Datei, die hier eingebunden wird.
type: MIME-Type des Objekts. Sollte eigentlich die Art der Verwendung bestimmen. Kann vom Browser selbst, oder von einem Plugin ausgeführt werden.
width, height: Breite und Höhe des Objekts. Wenn=0, dann ist das Objekt unsichtbar.

Alternative:
Zwischen den beiden tags <object> ... </object> kann sich alternativer HTML-Code befinden. Dieser Code wird dann ausgeführt, wenn der Browser das <object>-tag nicht versteht. Das ist normalerweise ein Hinweis-Text, kann aber auch ein anderes (einfacheres) Objekt sein, das selbst wieder alternativen Code enthalten kann.

Links:
SelfHTML, HTML-Referenz der Uni Halle, der Boku Wien, bei Reichart, ...

Attribute des <object>-tags:
Die Attribute lassen sich mit DOM-Methoden wie üblich analysieren und ändern. Die Wirkung lässt jedoch noch viele Wünsche offen.

Eine Änderung des "data"-Attributs findet zwar ohne Fehlermeldung statt, hat jedoch (vorläufig) keine Wirkung auf die Webseite. Wenn das einmal funktioniert, dann kann man damit ganze Teile einer Webseite dynamisch umschalten, das entspricht einem Auswechseln von "Bausteinen".

Eine Änderung des "type"-Attributs wird derzeit nur dann ausgeführt, wenn das im Einklang mit der Windows-Datei-Endung (z.B. txt, htm, ...) ist. Wenn dieses feature einmal funktioniert, dann kann man durch eine Änderung z.B. eine *.htm-Datei abwechselnd als Text (type="text/plain") und als Webseiten-Teil (type="text/html") anzeigen.

Anwendung mit einem Text-Objekt:
Das ist der Alternativ-Text zu text/plain - wenn er sichtbar ist, funkt das object nicht !
Hier wird eine gewöhnliche Text-Datei als Objekt integriert: Verwendung z.B. als einfach austauschbarer Text.

Beispiel: Änderung von Datenquelle, Höhe und Rahmen.
Links das object, rechts der HTML-Code.

<object id="obj_txt" data="obj1.txt" type="text/plain" width="100%" height="30" border="1">
Alternativer HTML-Code
</object>

Anwendung mit einem HTML-Objekt:
Das ist der Alternativ-Text zu text/html - wenn er sichtbar ist, funkt das object nicht !
Hier wird eine HTML-Datei als Objekt integriert: Verwendung z.B. als wiederverwendbares Webseiten-Standard-Element.

Beispiel: Änderung von Datenquelle, Höhe und Rahmen.
Links das object, rechts der HTML-Code.
<object id="obj_htm" data="obj1.htm" type="text/html" width="100%" border="1" height="100">
Alternativer HTML-Code
</object>

Anwendung mit einem Bild-Objekt:
Das ist der Alternativ-Text zu text/html - wenn er sichtbar ist, funkt das object nicht !
object

img

Einbindung von Bildern: Die alte Version mit <img> (rechts) funktioniert fast immer. Das object (links) wird von Navi7 und Opera6 richtig interpretiert, M$IE6 macht Unsinn. Änderung der Datenquellen ist derzeit nur mit img möglich.
<object id="obj_img1" data="hand_left.gif" type="image/gif" width="64" height="24">
Alternativer HTML-Code
</object>

Anwendung mit einem Sound-Objekt:
Das ist der Alternativ-Text zu object audio/midi - wenn er sichtbar ist, funkt das object nicht !
object

embed
Hier wird eine sound-Datei als <object> (oben) und als <embed> (unten) integriert.
Die alte Version mit <embed> funktioniert in den meisten Browsern, die neue mit <object> lässt noch zu wünschen übrig.
Da der Browser den sound nicht selbst bearbeitet, überlässt er das dem dafür verantwortlichen PlugIn - das ist je nach User unterschiedlich, daher ist auch die Größe schwer einzustellen.
Navi7 funktioniert korrekt, M$IE6 und Opera6 können nur das <embed>-Objekt darstellen.
Tip: sounds lassen sich auch als Links einbauen...

<object id="obj_mid" data="s000.mid" type="audio/midi" border="1" width="250" height="50">
Alternativer HTML-Code
</object>

Hinweise:
Ältere Browser verstehen das <object>-tag gar nicht, neuere durchaus unterschiedlich, wobei Navi7 deutlich vorne liegt. M$IE6, Navi7 und Opera6 zeigen die hier geladenen Objekte richtig an, lassen jedoch (mit den angewendeten Methoden - siehe HTML-Quelltext) keine Änderung der data zu. Opera6 lässt überhaupt keine Änderung zu. M$IE6 vermutet hinter jedem object fälschlich eine ActiveX-Objekt und bringt beim Laden der Seite einen lästigen Dialog - wenn man mit "Ja" antwortet, ladet die Seite, wenn nicht, stürzt das Programm meistens ab.

Größe:
Sie sollten die Größe des objects angeben ( in px oder %). Falls der Inhalt größer ist, fügen die Browser scroll-bars ein. Sie können die Größe dynamisch ändern. Bei height=width=0 wird das Objekt nicht angezeigt - das ist z.B. bei automatisch abgespielten sounds sinnvoll - dann kann ein object auch innerhalb des head-Teiles einer Webseite vorkommen.

Programmierung des <object>-tags:
Scripts zur Änderung der Datenquellen:
Hier wird gezeigt, wie man das Bild obj_img umschaltet:
<img id="obj_img" src="hand_right.gif">

Die Funktion toggle_img() schaltet bei jedem Aufruf zwischen 2 stabilen Zuständen um. Der momentane Zustand wird in der Variablen tog_img gespeichert, welche nur die Werte 0 oder 1 annimmt. Mit dem Umschalten der Variablen wird gleichzeitig auch die Datenquelle hin- und hergeschaltet.

Der Objektknoten wird über seine id angesprochen, das ist einfach und sicher, er wird der Variablen node zugewiesen. Dann kann man mit der Methode setAttribute die Attribute ändern, hier das Attribut "src".

Anmerkung: Leider wirkt sich derzeit eine Änderung des object-Attributs "data" nicht aus, daher können objects nicht "umgeschaltet" werden.
<script type="text/javascript">
tog_img=0;
function toggle_img() {
  var node = document.getElementById("obj_img");
  if (tog_img) {
    tog_img=0;
    node.setAttribute("src","hand_right.gif");
  }
  else {
    tog_img=1;
    node.setAttribute("src","hand_left.gif");
  }
}
</script>


Homepage von PS-Trainer - Webdesign - an PS-Trainer
Aktuelle Daten dieser Seite Letzte Änderung:
  Geocities

 

 

 

Hosted by www.Geocities.ws

1