SELFHTML Forums-Auslese DHTML |
Forums-Auslese |
|
|
 | |
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äßt. Die Methode basiert darauf, daß 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, muß 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, daß 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 angepaßt 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 angepaßt, 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 muß dieser jedesmal 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, daß 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üßte 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>
|
|
| |
weiter: |
Microsoft Filter und Datenanbindung
|
zurück: |
Dynamisches Positionieren
|
das Redaktionsteam