Fliegender
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 <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 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>=creen.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:

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{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 <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.