 |
Text oder Grafik frei bewegenDie Positeoniermöglichkeiten, die CSS bietet, sind auch in Javascript zugänglich. Hier erst kann man die für Bewegungen erforderlichen Koordinatenveränderungen erzeugen. Bewegt wird entweder direkt ein mit dem <img>-Tag eingegebenes Bild oder, besser, ein Container <div>, der genau für diese Zwecke mit CSS eingeführt wurde.
Bloß, die Welt ist schlecht! Einfach nur so bewegen,wo kämen wir hin, wenn das nun überall klappte.Die IExplorer nutzen, je nach Alter das Objekt "all"oder gestatten mit "getElementById" das Ansprechendes zu bewegenden Containers oder aber sie können beides,was auch nicht so gut ist. Netscapes Browser hatten zu diesemZweck Layer, ab Nummer 6 fehlen diese, dafürwird aber getElementById unterstützt.
Nun gibt es zwei Möglichkeiten:
Entweder erfragt man zunächst den Browsertyp,neuerdings also nicht nur mittels des Anfangsbuchstabens ("M"wie Microsoft..." oder "N" wie Netscape..) und ärgertsich über Opera, das nach Wunsch jeden beliebigen Typzurückmeldet
oder man läßt Browser Browser sein und legtfür die Unterscheidung die technischen Fähigkeitender Browser selbst zugrunde.
So etwa sähe das dann aus:
Im Head, aber nicht notwendig dort, wird eine style-Definitionangebracht:
<style type="text/css">
.bewegt{positeon:absolute;font-size:18pt;font-weight:bold;color:red;}
</style>
Dann ist die eigentliche Bewegungsfunktion erforderlich:
<script language=JavaScript>
var x=0;
function bewege()
{
x+=2;if(x>=screen.width-50)x=0;
y=105-100*Math.sin(1.65+x/50);
if (document.getElementById)fly=document.getElementById("flieger").style;
else if (document.all)fly=document.all["flieger"].style;
else if (document.layers)fly=document.layers["flieger"];
else null;
if(fly){fly.top=y;fly.left=x;}
window.setTimeout('bewege()',25);
}
</script>
Der <body>-Bereich beginnt:
<body onLoad="bewege();">
<div class="bewegt" name="flieger">
Fliegender Text mit
<IMG src="bilder/k_gelb.gif" height="39"
width="37">
</div> |
Sieht vielleicht schlimm aus, ist aber recht logisch. Zuerst
werden bei jedem Aufruf der Funktion "bewege" neue
Koordinaten berechnet. Dann folgt der Block, der für
drei unterschiedliche technische Lösungen den Zugriff
auf den Div-Container realisiert. Diese Verzweigung läßt
sich unter Verwendung der kompakteren bedingung?jaZweig:neinZweig;-Syntax
der if-then-Struktur noch deutlich verkürzen, wird
aber damit undurchsichtiger.
Grafiken zeitgesteuert wechseln
Wenn eine feste Folge von Grafiken angezeigt werden soll,
dann bieten sich animierte Gif's an, die ja genau zu diesem
Zweck erfunden worden sind. Ihr Vorteil gegenüber einer
selbst programmierten Animation ist, daß die Bilddatei
optimal komprimiert ist und auf einen Rutsch geladen wird.
Wenn allerdings der Wunsch besteht, eine Zufallsfolge von
Bildern zu zeigen, dann können Gif's das möglicherweise
sogar auch (weiß ich nicht), aber man könnte ja,
und sei es aus Spaß an der Freude oder um das Gif-Format
zu meiden, mal selber tätig werden.
Nehmen wir an, die z.B. 8 Bilder seien gemalt und unter einer
praktischen Dateibezeichnung wie "ziel1.gif", "ziel2.gif",
...,"ziel8.gif" gespeichert. Dann kommt der Programmteil.
Der ist umständlicher, als zunächst zu vermuten
ist. Das bloße Zuweisen wechselnder Grafikadressen an
die src-Eigenschaft funktioniert nicht. Deshalb mußte
hier zunächst ein Array definiert werden, das die Grafiken
vorhält.
Anstelle eines Namens, hier "fl" für das zu
wechselnde Bild hätte auch images[0] bzw. images[1]
stehen können. Man vergleiche die Bemerkung zum vorhergehenden
Grafikbeispiel.
<script language=JavaScript>
<!--
var bild = new Array();
for(i=1;i<9;i++){bild[i]=new Image();bild[i].src="bilder/ziel"+i+".gif"}
function flattere()
{
num=Math.ceil(8*Math.random());
document.fl.src=bild[num].src;
window.setTimeout("flattere()",100);
}
//-->
</script>
Das Image-Tag für die Flattergrafik soll einen
Namen definieren, es lautet
<img src="bilder/ziel1.gif" name="fl" ... > |
Beispiel: Bewegte Grafik zufallsgesteuert und als animiertes
Gif.
 
Grafikausgabe abhängig von speziellen
Bedingungen
Wenn eine z.B. mit der Jahreszeit oder -wie hier- dem Monat
wechselnde Grafikausgabe gewünscht wird, ist dies mit
einfachen Mitteln zu bewerkstelligen. An der Stelle, an der
das Bild erscheinen soll, steht:
<img name="hier" width=150 height=50 align=abscenter>
<script language=JavaScript>
datum=new Date();
num=1+datum.getMonth();
wbild=new Image();
wbild.src="bilder/"+num+".gif";
document.hier.src=wbild.src;
</script> |
Zur Erläuterung dessen was hier geschieht, einige
Anmerkungen:
- Das img-Tag gibt keine Bildquelle an. Problematisch
ist an der Konstruktion aber, daß für das Bild
die Maße vorab mit angegeben werden müssen.
Wenn Bilder stark wechselnder Größe oder wechselnder
Proportion geladen werden sollen, kann man natürlich
nicht mehr so vorgehen, wie hier.
- Der script-Eintrag folgt dem img-Tag,
weil die folgende Bilderauswahl die Kenntnis des Namens
des Bildes, hier also "hier" voraussetzt.
- Die Bilderauswahl erfolgt nach dem laufenden Monat.
Deshalb muß zunächst eine Datums-Instanz
erzeugt werden. Die Funktion .getMonth() liefert
Zahlenwerte von 0 bis 11. Um der Übersichtlichkeit
willen sind die Bilddateien aber mit den "richtigen" Monatsnummern
1 bis 12 codiert. Deshalb muß die Variable "num"
um 1 erhöht werden.
- Wie bei den zeitlich
wechselnden Bildern wird für das Bild eine Instanz
"wbild" des Image-Objekts erzeugt, der der aktuelle,
aus der Monatskennung erzeugte Bildername zugewiesen wird.
Wir haben jetzt den Monat: ![]()
Wahl der Hintergrundfarbe
Einem dringenden Bedürfnis folgend, wollen wir die Hintergrundfarbe
wählbar machen. Die Angabe und Veränderung gelingt
etwa mit der folgenden Funktion (meistens jedenfalls, nicht
bei Opera!):
<script language=JavaScript>
<!--
function farben(farbwort)
{
document.bgColor=farbwort;
}
//-->
</script> |
Alternativ, beim Aufruf mit einem Event kann ebensogut
| onclick="document.bgColor=farbwort;" |
verwendet werden. Allerdings gibt es bei der Auswahl geeigneter
Ereignisse Probleme. Das onclick-Ereignis funktioniert nur
auf Links oder Tabellenelementen, auch die Mausereignisse
funktionieren nicht über normalem Text. Welche Möglichkeiten
gibt es?
Normale Links
<a href="#kit" onclick="farben('ff0000')">Rot</a>
<a href="#kit" onclick="farben('00ff00')">Grün</a>
<a href="#kit" onclick="farben('ffff88')">Gelb</a> |
Rot
Grün
Gelb
Hier besteht das Problem, den Link vom "linken" abzuhalten.
Deshalb wurde hier vor "Normale" eine Marke "kit" gesetzt,
die ohne Veränderung in der Darstellung angesprungen
werden kann. Ohne solche Klimmzüge kommt man aus mit
Buttons
<form>
<input type=button value="Weiss"
onclick="farben('ffffff');">..
<input type=button value="Schwarz"
onclick="farben('000000');">..
<input type=button value="Blau"
onclick="farben('0000ff');">
</form> |
Dies war die sauberste Lösung.
Es gibt noch
Bilder
<a href="#bil" onclick="farben('ff9999')"><img
SRC="bilder/k_rot.gif" height=39 width=37></a>
<a href="#bil" onclick="farben('99ff99')"><img
SRC="bilder/k_gruen.gif" height=39 width=37></a>
<a href="#bil" onclick="farben('9999ff')"><img
SRC="bilder/k_blau.gif" height=39 width=37></a> |
  
auch die funktionieren nur als Links. Also wieder der Sprung
in die Nähe.
Anmerkung: IExplorer 4.0 akzeptiert solche nachträglichen
Farbänderungen nicht, wenn dem body durch
style-Angaben eine Hintergrundfarbe zugeordnet
wurde. In diesem Kurs ist das sonst durchgängig der
Fall. Auf dieser Seite wurde die externe CSS-Datei nicht
geladen.
Sonstiger Kitsch
Wechselnde Grafik oder Laufschrift sind schon schlimm genug,
man kann immer noch einen draufsetzen. Zu diesem Zweck kann
mit einem Zufallsgenerator eine der zulässigen Farben
generiert und dann zu irgendwelchen Ausgaben genutzt werden.
Eine solche Funktion könnte etwa lauten:
<script language=JavaScript>
var farbe;
function farbwahl()
{
farbe="rgb(" + Math.floor(100*Math.random())
+ "%," + Math.floor(100*Math.random()) + "%," +
Math.floor(100*Math.random()) + "%)";
}
</script> |
Wie man sie verwendet, ist eine zweite Frage. Die unten
folgende "Schönheit" ist mit diesem Code erzeugt worden:
Im Head eine Style-Definition:
<style type="text/css">
div{positeon:absolute;font-size:30pt;font-weight:bold;}
div.l1{left:5px;}
div.l2{left:38px;}
div.l3{left:55px;}
div.l4{left:81px;}
div.l5{left:105px;}
div.l6{left:135px;}
</style>
hier im Code wird ein Bezugspunkt gesetzt:
<div>style="color:rgb(255,255,255);">.</div>
und dann losgekitscht:
<SCRIPT language=javascript>
for(i=1;i<=5;i++)
{
farbwahl();document.write("<DIV
class='l1' style='color:"+farbe+";'>K</DIV>");
farbwahl();document.write("<DIV
class='l2' style='color:"+farbe+";'>I</DIV>");
farbwahl();document.write("<DIV
class='l3' style='color:"+farbe+";'>T</DIV>"); >
farbwahl();document.write("<DIV
class='l4' style='color:"+farbe+";'>S</DIV>");
farbwahl();document.write("<DIV
class='l5' style='color:"+farbe+";'>C</DIV>");
farbwahl();document.write("<DIV
class='l6' style='color:"+farbe+";'>H</DIV>");
<font size='+3'><br>
</font>
}
</SCRIPT> |
.
Na, habe ich zuviel versprochen, ist es nicht entzückend?
Anmerkung: Auch dieser Effekt bedurfte einer Anpassung
bezüglich der Browser. So wie oben angegeben funktioniert
die Sache im Navigator. Er erkennt die große Schrift
und bricht mit einem einfachen <br> ordnungsgemäß
um. Der Explorer erkennt die Schriftgröße nicht,
die Umbrüche entsprechen der Schriftgröße
0 und setzen damit die Texte aufeinander. Abhilfe im Code:
Das Tag <br> wird auf Schriftgröße
+3 eingestellt.
|
DIENSTE
