SUCHE MIT Google
Web virtualuniversity.ch
HOME DIDAKTIK ECDL ELEKTRONIK GUIDES HR MANAGEMENT MATHEMATIK SOFTWARE TELEKOM
DIENSTE
Anmeldung
Newsletter abonnieren
Sag's einem Freund!
VirtualUniversity als Startseite
Zu den Favoriten hinzufügen
Feedback Formular
e-Learning für Lehrer
Spenden
Autoren login
KURSE SUCHEN
Kurse veröffentlichen

Suche nach Datum:

Suche mit Schlüsselwort:

Suche nach Land:

Suche nach Kategorie:
PARTNER
ausbildung24.ch - Ausbildungsportal, Seminare, Kursen... 

 
HTMLopen.de - Alles was ein Webmaster braucht

 
PCopen.de - PC LAN Netze und Netzwerke - alles was ein IT Profi und Systemtechnicker braucht

SOFTWARE

Text oder Grafik frei bewegen

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



DIPLOMARBEITEN UND BÜCHER

Diplomarbeiten zum Runterladen:

Suche im Katalog:
Architektur / Raumplanung
Betriebswirtschaft - Funktional
Erziehungswissenschaften
Geowissenschaften
Geschichtswissenschaften
Informatik
Kulturwissenschaften
Medien- und Kommunikationswissenschaften
Medizin
Psychologie
Physik
Rechtswissenschaft
Soziale Arbeit
Sozialwissenschaften


JOBS
HOME | E-LEARNING | SITEMAP | LOGIN AUTOREN | SUPPORT | FAQ | KONTAKT | IMPRESSUM
Virtual University in: Italiano - Français - English - Español
VirtualUniversity, WEB-SET Interactive GmbH, www.web-set.com, 6301 Zug

Partner:   Seminare7.de - PCopen.de - HTMLopen.de - WEB-SET.com - YesMMS.com - Ausbildung24.ch - Manager24.ch - Job und Karriere