Text mit
Grafikausgaben
Text oder Grafik frei bewegen
Die Positioniermö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 -Tag eingegebenes Bild oder, besser, ein Container
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 Ansprechen des zu bewegenden Containers oder aber sie können beides, was auch nicht so gut ist. Netscapes Browser hatten zu diesem Zweck Layer, ab Nummer 6 fehlen diese, dafür wird 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 ärgert sich über Opera, das nach Wunsch jeden beliebigen Typ zurückmeldet
oder man läßt Browser Browser sein und legt für die Unterscheidung die technischen Fähigkeiten der Browser selbst zugrunde.
So etwa sähe das dann aus:
Im Head, aber nicht notwendig dort, wird eine style-Definition angebracht:
<style type="text/css">
.bewegt{position: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+'px';fly.left=x+'px';}
window.setTimeout('bewege()',25);
}
</script>Der
-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 einer ID, 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="images/stories/ziel"+i+".gif"}
function flattere()
{
num=Math.ceil(8*Math.random());
document.getElementById('fl').src=bild[num].src;
window.setTimeout("flattere()",100);
}
//-->
</script>Das Image-Tag für die Flattergrafik soll eine ID definieren, es lautet
<img src="https://www.kostenlose-javascripts.de/images/stories/ziel1.gif" id="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?
<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>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
<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:
<style type="text/css">
div{position: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
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
wird auf Schriftgröße +3 eingestellt.
Viel Spass beim Lernen und beim Erstellen eigener JavaScripts.