Basierend auf einem Forums-Beitrag vom 31.07.1998 von:
Paul Hobrecker, hobrecker@solutions-partner.de
Bekanntlich ist es bei Netscape bis hin zu Version 4.x schwierig bis
unmöglich, Texte in HTML-Dokumenten nachträglich zu verändern, sofern
es sich nicht um Texte in Formularfeldern handelt.
Im folgenden Beispiel wird jedoch gezeigt, wie sich zumindest die
Hintergrundfarbe
eines beliebigen Textbausteins dynamisch ändern lässt.
Die Methode basiert darauf, dass in Netscape bei Layern
jederzeit mittels
document.layers["layername"].bgcolor="#ff0000";
die Hintergrundfarbe geändert werden kann (siehe folgendes Beispiel).
Beim Microsoft IE 4.x sind nachträgliche Änderungen an Objekten
grundsätzlich kein Problem, ein entsprechendes Beispiel findet sich Beitrag
im 
Dynamische Hintergrundfarbe mit IE 4.x.
<html>
<head>
<script language="JavaScript">
<!--
function Text_Rot() {
document.layers["Beispiel"].bgColor="#ff0000";
}
function Text_Normal() {
document.layers["Beispiel"].bgColor="#ffffff";
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
Dies ist ein <layer id="Beispiel">Beispieltext</layer>
<br><br>
Text: <a href="JavaScript:Text_Rot()">Hervorheben</a>
...<a href="JavaScript:Text_Normal()">Normal</a>
</body></html>
|
Basierend auf einem Forums-Beitrag vom 28.09.1998 von:
Stefan Münz, muenz@csi.com
Beim Microsoft Internet-Explorer können via document.all.*
nachträglich alle Attribute eines Objekts auf einer HTML-Seite geändert
werden. Im folgenden Beispiel soll nachträglich die Hintergrundfarbe
eines Textes geändert werden, wie schon im Beitrag
Dynamische Hintergrundfarbe mit Netscape
demonstriert wurde.
Die Änderung der Hintergrundfarbe wird hierbei mit dem Befehl
document.all.Objekt_Name.setAttribute("bgcolor","#ff0000","false");
durchgeführt. Als Objekt wurde zur Demonstration eine Tabelle
mit einer einzigen Zelle gewählt.
<html>
<head>
<script language="JavaScript">
<!--
function Text_Rot() {
document.all.Beispiel.setAttribute("bgcolor", "#ff0000", "false");
}
function Text_Normal() {
document.all.Beispiel.setAttribute("bgcolor", "#ffffff", "false");
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
Dies ist ein
<table cellspacing="0" cellpadding="0" border="0" id="Beispiel">
<tr><td>Beispieltext</td></tr>
</table>
<br><br>
Text: <a href="JavaScript:Text_Rot()">Hervorheben</a>
...<a href="JavaScript:Text_Normal()">Normal</a>
</body></html>
|
Basierend auf einem Forums-Beitrag vom 22.12.1998 von:
Stefan Münz, muenz@csi.com
In dem Beitrag
Dynamische Hintergrundfarbe mit Netscape
wird gezeigt, wie in Netscape die Hintergrundfarbe von einem <layer>
bequem geändert werden kann. Statt der Hintergrundfarbe kann dabei auch
ein Hintergrund-Bitmap angegeben werden. Will man jedoch andere Eigenschaften wie
z.B. die Textfarbe verändern, muss das dem <layer>
zugeordnete HTML-Dokument jeweils neu aufgebaut werden.
Dies geschieht mit folgenden JavaScript-Befehlen:
document.Layer_Name.document.open();
document.Layer_Name.document.write("<h2>...neu...</h2>");
document.Layer_Name.document.close();
|
Zu beachten ist hierbei jedoch, dass die anfängliche
Layer-Größe nachträglich nicht mehr verändert
werden kann. Vergrößert man z.B. nachträglich die
Schriftgröße, wird der Text vermutlich nicht mehr in den
Layer passen und unvollständig angezeigt werden.
Es folgt auch hier ein Beispiel-Quelltext, der leicht an eigenen
Bedarf angepasst werden kann.
<html><head><title>Layer bei Netscape neu aufbauen</title>
<script language="JavaScript">
<!--
function textzeile(objekt, color, text) {
eval("document." + objekt + ".document.open()");
eval("document."
+ objekt
+ ".document.write(\"<font color='"
+ color
+ "'>"
+ text
+ "</font>\")");
eval("document." + objekt + ".document.close()");
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
Dies ist ein
<layer id="Beispiel">Beispieltext</layer>
<br><br>
Text:
<a href="JavaScript:textzeile('Beispiel','#ff0000','Beispieltext')">
Hervorheben</a>
...
<a href="JavaScript:textzeile('Beispiel','#000000','Beispieltext')">
Normal</a>
</body></html>
|
Basierend auf einem Forums-Beitrag vom 03.12.1998 von: Ali
Für die Verdeutlichung dieser Problematik dient das DHTML-Beispiel 
Datums-/Uhrzeitanzeige als Grundlage. Das Beispiel wurde außerdem für den neuen Internet Explorer 5 angepasst, indem in der CSS-Definition das Schlüsselwort all, das mittlerweile aus dem CSS-Standard entfernt wurde, nicht mehr angegeben wird.
In diesem Beispiel für Netscape ab 4.x und IE ab 4.x
wird in einer umrahmten Tabellenzeile rechtsbündig das Datum und die
Uhrzeit angezeigt und jede Sekunde aktualisiert. Um das Datum und die Zeit
dynamisch ändern zu können, wird entweder ein <div>- (IE)
oder ein <layer>-Tag (Netscape) verwendet. Bei Netscape muss
dieser jedes Mal neu aufgebaut werden, während beim IE lediglich eine
erneute Zuweisung der aktuellen Zeit an die innerHTML-Komponente
des div-Objektes reicht.
Bei Netscape besteht hierbei ein Problem, für welches
bisher keine voll zufriedenstellende Lösung gefunden werden konnte:
Definiert man die Tabelle
fest im HTML-Code und setzt lediglich in die Tabellen-Zelle den
<layer> mit Datum/Uhrzeit ein, so wird dieser immer
linksbündig dargestellt, und die Tabelle bleibt komplett leer.
Der <layer> scheint also nicht direkt mit einer Tabellen-Zelle
verknüpfbar zu sein. Um dieses Problem zu umgehen, wurde hier nun die
Tabellendefinition mit in den <layer> bzw. <div>
einbezogen. Damit bleibt immer noch das Restproblem, dass vom nachfolgenden
HTML-Code bei Netscape die erste Zeile auf der Tabelle liegt,
während beim IE die erste nachfolgende Zeile unterhalb der
Tabelle beginnt. Als Workaround müsste man also je nach Browser
nach der Tabelle z.B. noch ein <br> hinzufügen oder nicht.
<html>
<head>
<style type="text/css">
.Uhr { font-size:12pt; color:white; }
</style>
</head>
<body bgcolor="#000000" onLoad="window.setTimeout('ZeitAnzeigen()', 1000)">
<script language="JavaScript">
Wochentagname =
new Array("Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag");
function ZeitAnzeigen()
{
var Jetzt = new Date();
var Tag = Jetzt.getDate();
var Monat = Jetzt.getMonth() + 1;
var Jahr = Jetzt.getYear();
var Stunden = Jetzt.getHours();
var Minuten = Jetzt.getMinutes();
var Sekunden = Jetzt.getSeconds();
var WoTag = Jetzt.getDay();
var Vortag = ((Tag < 10) ? "0" : "");
var Vormon = ((Monat < 10) ? ".0" : ".");
var Vorstd = ((Stunden < 10) ? "0" : "");
var Vormin = ((Minuten < 10) ? ":0" : ":");
var Vorsek = ((Sekunden < 10) ? ":0" : ":");
var Datum = Vortag + Tag + Vormon + Monat + "." + Jahr;
var Uhrzeit = Vorstd + Stunden + Vormin + Minuten + Vorsek + Sekunden;
var Gesamt = "<table width='100%' border='1' cellpadding='0' cellspacing='0'"
+ "<tr><td valign='top' align='right'>"
+ "<span class='Uhr'>Datum: " + Datum + " " + "Uhrzeit: " + Uhrzeit + "</span>"
+ "</tr></td></table>";
if(document.all)
document.all.MicrosoftUhr.innerHTML = Gesamt;
else if(document.layers)
{
document.layers["NetscapeUhr"].document.open();
document.layers["NetscapeUhr"].document.write(Gesamt);
document.layers["NetscapeUhr"].document.close();
}
window.setTimeout("ZeitAnzeigen()",1000);
}
</script>
<div id="MicrosoftUhr" class="Uhr"></div>
<layer id="NetscapeUhr"></layer>
</body>
</html>
|
|
|
Basierend auf einem Forums-Beitrag vom 26.01.1999 von:
Christine Kuehnel, kuehnel@screenExa.net
Hier soll auf einen grundlegenden Unterschied zwischen Netscape und Internet-Explorer
in der Behandlung von durch <div>...</div> eingeschlossenen Bildern
hingewiesen werden. Angenommen, im HTML-Dokument steht ein Konstrukt wie
<DIV ID="Div_name">
<IMG NAME="Bild_name">
</DIV>
Dann muss folgender grundlegender Unterschied beachtet werden:
- Internet Explorer: Die Bilder innerhalb des <div>-Bereichs
werden im selben Array document.images verwaltet wie die Bilder außerhalb
dieses Bereiches. Daher kann man das Bild einfach wie gewohnt mit
document.images["Bild_name"] ansprechen.
- Netscape: In einem <div>-Bereich wird ein
neues document-Objekt erzeugt, dem alle im <div> befindlichen
Bilder untergeordnet werden, d.h. das neue document-Objekt erhält
ein neues images-Array. Daher muss man bei der Referenzierung
des Bildes aus obigem Beispiel zunächst das document im <div>-Bereich
referenzieren und von dort aus schließlich das Bild. Der Zugriff lautet also:
document.layers["Div_name"].document.images["Bild_name"].
Im Falle von Netscape wird es bei ineinander verschachtelten <div>...</div>-Bereichen
noch komplizierter. Man betrachte folgendes Konstrukt:
<DIV ID="Ebene_1">
<DIV ID="Ebene_2">
<IMG NAME="Bild_name">
</DIV>
</DIV>
In diesem Fall lautet der Zugriff auf das Bild:
document.layers["Ebene_1"].document.layers["Ebene_2"].document.images["Bild_name"].
Basierend auf einem Forums-Beitrag vom 22.01.1999 von:
Jörg Tröster, joerg.troester@gmx.de
Bei Netscape kann die Größe eines Layers z.B. mit dem Befehl
layerobjekt.resizeTo(breite, hoehe) geändert werden. Eine Alternative
ist der Befehl resizeBy, dem statt einer absoluten Breite und Höhe
Differenzwerte übergeben werden.
Leider wird der Inhalt des Layers dabei nicht
neu ausgerichtet. Wird z.B. der Layer verkleinert, kann ein
Teil des im Layer befindlichen HTML-Dokumentes abgeschnitten werden.
Eine andere Möglichkeit ist die im Abschnitt Layer in Netscape neu Aufbauen
angeführte Lösung, die document-Komponente eines
Layers neu mit document.write usw. zu beschreiben. Hierbei tritt das umgekehrte
Problem auf: Das neu erzeugte HTML-Dokument kann breiter sein als der ursprüngliche Layer.
Auch hier wird der überstehende Teil des Inhaltes abgeschnitten
Eine Alternative ist jedoch die load(url, width)-Methode des Layer-Objektes.
Mit dieser Methode wird der Inhalt eines Layers dynamisch durch den Inhalt einer
URL ausgewechselt. Die Breite des Layers wird dabei in Pixeln vorgegeben, und der Inhalt
wird entsprechend der angegebenen Breite umgebrochen, also insbesondere nicht abgeschnitten.
Es gilt dabei folgendes zu beachten:
- Die load(...)-Methode funktioniert nur bei Layern
und nicht bei <div>
- Die Methode scheint nur zu funktionieren, wenn eine Http-Adresse
im Url-Parameter von load übergeben wird. Mit
lokalen Dateipfad-Angaben scheint es nicht zu funktionieren.
Beispiel: Layer mit unterschiedlicher Breite formatieren
<html><head><title>Layer neu formatieren</title>
<script language="JavaScript">
var url="http://meine.url.com/dummy.htm";
function reload(width) {
document.layers["Test_layer"].load(url, width);
}
</script>
</head>
<body>
<layer ID="Test_layer" top=100 src="http://meine.url.com/dummy.htm">
</layer>
<a href="javascript:reload(200)">Breite=200</a>
<a href="javascript:reload(300)">Breite=300</a>
<a href="javascript:reload(400)">Breite=400</a>
</body>
</html>
|
Basierend auf einem Forums-Beitrag vom 01.04.1999 von:
Mirko, mirko@rockt.nu
Michael, michael@luxem.de
"Dynamisches HTML" muss sich nicht nur auf dynamische Texte und Bilder
beschränken, sondern kann z.B. auch im Zusammenhang mit Sound- bzw. Mididateien
angewendet werden. Hier wird beschrieben, wie man in die innerHTML-Komponente
eines <div> dynamisch <embed>-Tags mit Midi-Dateien
schreiben kann. Auf diese Weise kann man z.B. eine Art 'Music Box' realisieren,
die vom Benutzer ausgewählte Stücke abspielt. Das Beispiel funktioniert
nur mit dem Internet Explorer ab Version 4.
Beispiel: Eine Music Box mit dynamisch aufgerufenen Midi-Dateien
<html><head><title>Music Box</title></head>
<body>
<div id="midi"></div> <!-- Hier wird spaeter das embedded
Midi-File dynamisch erzeugt -->
<script language="JavaScript">
<!--
function go(x) {
if (document.all) {
// ggfs. im folgenden das 'hidden'-Attribut weglassen.
document.all.midi.innerHTML = "<embed src=\""+x+"\" hidden=\"true\">";
}
}
//-->
</script>
<form>
<select size=1 name="Auswahl"
onChange="go(this.form.Auswahl.options[this.form.Auswahl.options.selectedIndex].value)"
style="width:110px; background-color:#FFFFFF; font-size:9pt; font-family:Arial;">
<option value="nichts">Music-Box
<option value="cher_believe.mid">Cher_Believe
<option value="cocojambo.mid">Cocojambo
<option value="gildo.mid">Gildo
<option value="maenner.mid">Maenner
</select></form>
</body></html>
|
IE: Bug beim dynamischen Ändern von Inhalten
Basierend auf einem Forums-Beitrag vom 02.02.1999 von:
Mirko, mirko@rockt.nu
Stefan Muenz, muenz@csi.com
Beim Internet Explorer 4 kann im Zusammenhang mit dynamischem Ändern von Inhalten
folgender Fehler beobachtet werden: Wenn innerhalb des <body>-Bereiches
z.B. ein Paragraph definiert wird, dessen Inhalt mittels innerHTML in einem
nachfolgenden Skript-Block verändert wird, dann verhält sich der IE4
unter Umständen so, als ob die Seite noch nicht komplett geladen und der entsprechende Paragraph
noch nicht vorhanden wäre. Dieses Problem ist beim IE5 behoben.
Beispiel: Folgende Seite funktioniert mit IE5 aber nicht mit IE4
<html><head><title>Fehler</title></head>
<body>
<p id="TckrTxt">Alter Text</p>
<SCRIPT language="JavaScript">
document.all.TckrTxt.innerHTML = "Neuer Text";
</SCRIPT>
</body></html>
|
Obwohl der Paragraph "TckTxt" vor dem Skript steht, in dem der Inhalt
geändert wird, scheint er beim IE4 noch nicht zugriffsbereit zu sein.
Um dieses Problem zu umgehen, muss mit Hilfe des onLoad-Events
sichergestellt werden, dass das Dokument komplett geladen ist, bevor
Manipulationen an Objekten durchgeführt werden. Eine Möglichkeit
findet sich in folgendem Beispiel:
Beispiel: Workaround, der sowohl mit IE5 als auch mit IE4 funktioniert
<html><head><title>Workaround</title>
<SCRIPT language="JavaScript">
function change() {
document.all.TckrTxt.innerHTML = "Neuer Text";
}
</SCRIPT>
</head>
<body onload="change()">
<p id="TckrTxt">Alter Text</p>
</body></html>
|
Basierend auf einem Forums-Beitrag vom : 05.06.1999 von:
Joachim Wendenburg, wendenburg@t-online.de
Sie möchten für Links verschiedene Farben verwenden. Dies erreichen Sie durch die Verwendung von CSS Klassen-Angaben. Lesen Sie dazu den Forum-Auslesebeitrag Verschiedene Farben für Verweise (Links).
Der Netscape Navigator interpretiert den Hover-Effekt nicht und ignoriert beim Überfahren des Verweises die CSS-Angaben. Sie können diesen Effekt
mittels JavaScript erzeugen.
Definieren Sie dazu jeden Verweis innerhalb eines Layers. Beim Überfahren des Verweises wird dieser Layer neu
aufgebaut und dem Verweis eine andere CSS-Klasse zugeordnet. Mit dem Verlassen des Verweises wird der ursprüngliche Zustand
wieder hergestellt.
Beispiel:
<html><head>
<title>a:hover im Netscape Navigator </title>
<script language="JavaScript">
<!--
function mach_rot(a1,a2,a3)
{
if (document.layers)
{
inhalt='<a class="rot" href="'+a3+'" onMouseOut="mach_schwarz('+a1+',\''+a2+'\',this.href)">'+a2+'</a>';
document.layers[a1].document.open();
document.layers[a1].document.write(inhalt);
document.layers[a1].document.close();
}
}
function mach_schwarz(b1,b2,b3)
{
if (document.layers)
{
inhalt='<a class="schwarz" href="'+b3+'" onMouseOver="mach_rot('+b1+',\''+b2+'\',this.href)">'+b2+'</a>';
document.layers[b1].document.open();
document.layers[b1].document.write(inhalt);
document.layers[b1].document.close();
}
}
// -->
</script>
<style type="text/css">
<!--
#ebene0 {position:absolute;top:30px;left:20px;}
#ebene1 {position:absolute;top:30px;left:80px;}
A.rot:link {color:red;}
A.rot:visited {color:red;}
A.schwarz:link {color:#000000;}
A.schwarz:visited {color:#000000;}
A:link {color:#000000;}
A:visited {color:#000000;}
A:hover {color:red;}
-->
</style>
</head>
<body>
<div id="ebene0">
<a href="seite1.htm" onMouseOver="mach_rot(0,'LINK 1',this.href)">LINK 1</a>
</div>
<div id="ebene1">
<a href="seite2.htm" onMouseOver="mach_rot(1,'LINK 2',this.href)">LINK 2</a>
</div>
</body>
</html>
|
Erläuterung:
Im Beispiel wurden die CSS-Klassen durch eine zentrale Definition festgelegt. Lesen Sie
hierzu auch den SELFHTML-Abschnitt Zentrale Formate definieren.
Innerhalb der Datei befindet sich jeder Verweis in einem Layer.
Beim Überfahren des Verweises wirkt der Event-Handler onMouseOver. Dieser ruft die Funktion mach_rot() auf. Als Parameter werden an
der Funktion die Layernummer (Parameter a1), der Verweistext (Parameter a2) und das Verweisziel (Parameter a3) übergeben.
In der Funktion mach_rot() wird aus diesen Angaben durch Zeichenkettenverknüpfung der Verweisstring erzeugt. Dieser erhält die Klasse rot und für den Event-Handler onMouseOut einen Funktionsaufruf. Anschließend
wird mit dieser Zeichenkette der den Verweis enthaltende Layer neu aufgebaut. Lesen Sie dazu auf dieser Seite den Abschnitt Layer bei Netscape neu aufbauen.
Beim Verlassen des Verweises wird die Funktion mach_schwarz() aufgerufen, die den alten Zustand wiederherstellt. Die Bedeutung der Parameter in dieser Funktion entsprechen
denen der Funktion mach_rot().
Hinweise:
Im MS Internet Explorer erfolgt kein Austausch der Klassen. Dort wirkt ganz normal die A:hover-Definition.
Auf langsamen Systemen erfolgt der Farbwechsel nicht immer flüssig bzw. gar nicht.
© 2000 das Redaktionsteam
SELFHTML 
Referenzierung von Bildern in <div>-Umgebungen, Netscape vs. IE
