Home / Tutorials / JavaScript Handbuch / Arbeiten mit Bildern


Animationen mit JavaScript
Fenster in der Bildgröße aufblenden
Größe eines Bildes dynamisch verändern
Filter für Bilder

Animationen mit JavaScript

Bestimmte Bildeffekte mit JavaScript findet man auf jeder Website. Das sind die bekannten roll over Effekte in allen Variationen, siehe Rollover et alter. Man kann aber auch sowas machen.

Animationen mit JavaScript


Animation wiederholen Das ist tendenziell eigentlich auch weniger umständlich, als eine Gif Animation zu machen. Der Skript, der uns dieses Kunstwert auf den Schirm setzt, sieht so aus.

<script language="javascript">
neun=new Image();
acht=new Image();
sieben=new Image();
sechs=new Image();
fuenf=new Image();
vier=new Image();
drei=new Image();
zwei=new Image();
eins=new Image();
neun.src="js_beispiele/27_arbeiten_bilder/9.gif";
acht.src="js_beispiele/27_arbeiten_bilder/8.gif";
sieben.src="js_beispiele/27_arbeiten_bilder/7.gif";
sechs.src="js_beispiele/27_arbeiten_bilder/6.gif";
fuenf.src="js_beispiele/27_arbeiten_bilder/5.gif";
vier.src="js_beispiele/27_arbeiten_bilder/4.gif";
drei.src="js_beispiele/27_arbeiten_bilder/3.gif";
zwei.src="js_beispiele/27_arbeiten_bilder/2.gif";
eins.src="js_beispiele/27_arbeiten_bilder/1.gif";
bilder=new Array(neun,acht,sieben,sechs,fuenf,vier,drei,zwei,eins);
nummer=1;
function animation()
{
document.images["animation"].src=bilder[nummer].src;
nummer++;
if(nummer<=9)
{
ende=window.setTimeout("animation()",1000);
}
else
{
nummer=1;
clearTimeout(ende);
}
}
window.onload=animation;
</script>
<img src=js_beispiele/27_arbeiten_bilder/9.gif name="animation">
<A href=javascript:animation()>

Wer es nachbauen will, braucht die Bilder, die gibt es bilder_blume.zip. Wie deutlich zu erkennen, ist der Skript relativ simpel. Um sicher zu stellen, dass in dem Moment, in dem die Animation aufgerufen wird, tatsächlich alle Bilder vorhanden sind laden wir die Bilder in ein Objekt vom Typ Image, genau genommen generieren wir eine Instanz der Klasse Image, Image ist ein Konstruktor, siehe Eigene Objekte mit JavaScript. Anschliessend weissen wir diesem Image Objekt den source code (src) zu.

acht=new Image();
sieben=new Image();
.....

neun.src="js_beispiele/27_arbeiten_bilder/9.gif";
acht.src="js_beispiele/27_arbeiten_bilder/8.gif";
sieben.src="js_beispiele/27_arbeiten_bilder/7.gif";

Alle unsere Image Objekte übergeben wir dann an einen Array. Jedes Element dieses Array hält dann also ein Objekt.

bilder=new Array(neun,acht,sieben,sechs,fuenf,vier,drei,zwei,eins);

Die Funktion animation tauscht dann lediglich die Bilder aus und sorgt mit nummer++ dafür, dass bei jedem erneuten Aufruf über

window.setTimeout("animation()",1000);

das nächste Bild aufgerufen wird. Eigentlich ist dieses Verfahren also bei einfachen Gifanimationen ohne Überblendungseffekte etc. vorzuziehen.

Fenster in der Bildgröße aufblenden

In der Internetprogrammierung steht man sehr oft vor dem Problem, dass man zuerst nur einen thumbnail, einen Daumennagel, eine verkleinerte Version des Bildes zeigen will und wenn der User clickt, das ganze Bild. Man will dies in der Regel bei Anzeigenmärkten und ähnlichem, um das Layout der Seite nicht zu zerschmettern. Das Problem besteht nun darin, dass die Bilder unterschiedlich gross sind und folglich das Fenster, in das sie dann reingeschossen werden, im günstigsten Fall genau so gross ist, wie das Bild. Betrachten wir ein Beispiel.

"); fenster2.document.write(""); fenster2.document.write(""); fenster2.document.close(); fenster2.focus(); }

Nun ? Wie deutlich zu sehen, sind die thumbnails zwar in etwa gleich gross, die dahinter liegenden Bilder sind aber völlig unterschiedlich gross. Clickt man auf ein Bild, werden die Bilder in völlig unterschiedliche Fenster geschossen, wobei die Fenster genau so gross sind wie die Bilder. Der Skript, der uns dieses Kunstwerk vor die Nase setzt sieht so aus.

<script language="javascript">
function aufblenden(a)
{
bildle=new Image();
bildle.src="thumbnail/"+a;
hoehe=bildle.height;
breite=bildle.width;

fenster2=window.open("","fenschterle", 'width='+breite+'height='+hoehe+',scrollbars=no');
fenster2.resizeTo(breite+10,hoehe+20);
fenster2.document.open();
fenster2.document.write("<html><head><title>bild</title></head><body leftmargin=0 topmargin=0 margindwidth=0 marginheight=0>");
fenster2.document.write("<img src=thumbnail/"+a+">");
fenster2.document.write("</body></html>");
fenster2.document.close();
fenster2.focus();
}
</script>
<table>
<tr>
<td><img src=thumbnail/thumbs/andres.png name="bild1" onClick=aufblenden("andres.png")></td>
<td><img src=thumbnail/thumbs/wre.jpg name="bild2" onClick=aufblenden("wre.jpg")></td></tr>
</table>

Auch hier steht fest, der Skript ist kurz und dennoch nützlich. (Anmerkung: Ein Fenster, dass man zumacht ist trotzdem irgendwie noch als Objekt vorhanden. Von daher ist es nicht möglich, gleich beim öffnen die Breite und Höhe sicher festzulegen. Man braucht resize.) Wenn wir die Funktion aufblenden() aufrufen, dann übergeben wir als Parameter das aufzublendende Bild. Von diesem müssen wir dann erstmal die Breite und die Höhe ermitteln.

bildle=new Image();
bildle.src="thumbnail/"+a;
hoehe=bildle.height;
breite=bildle.width;

Wir bilden also ein neues Image Objekt und weisen diesem den src Code zu. Anschliessend ermitteln wir von diesem Bild die Höhe und die Breite. Mit diesen beiden Werten öffnen wir ein neues Fenster. Bedingt durch die Tatsache, dass JavaScript nicht in der Lage ist, das alte Windows Objekt zu überschreiben, bzw. dieses Windows Objekt auch dann noch vorhanden ist, wenn das Fenster geschlossen ist, ist diese Methode nicht sicher. Deswegen bestimmten wir die Breite und die Länge des Fensters nochmal mit resize().

Größe eines Bildes dynamisch verändern

Obwohl ziemlich einfach, sieht man es nur ziemlich selten, aber eigentlich ist es auch kein Problem, ein Bild dynamisch zu vergrößern, bzw. zu verkleinern.

Der Skript der das produziert ist hart am Rande der Minimalkonzeption eines JavaScriptes.

<script language="javascript">
function vergroessern()
{
document.images["rennfahrer"].width=400;
}
function verkleinern()
{
document.images["rennfahrer"].width=200;
}
</script>
<img src=js_beispiele/27_arbeiten_bilder/rennfahrer1.jpg name="rennfahrer" width=200 onMouseOver=vergroessern() onMouseOut=verkleinern()>

Wer aus ästhetischen Gründen will, dass das langsam an- und dann wieder abschwillt, der kann sowas machen.

Der Skript der unser Sparschwein anschwellen lässt sieht so aus.

<script language="javascript">
breite=150;
ampel="klein";
function aufundab()
{
if(ampel=="klein")
{
breite=breite+2;
document.images["sparschwein"].width=breite;
window.setTimeout("aufundab()",100);
if(breite>=230)
{
ampel="gross";
}
}
else
{
breite=breite-2;
document.images["sparschwein"].width=breite;
window.setTimeout("aufundab()",200);
if(breite<=150)
{
ampel="klein";
}
}
}
window.onload=aufundab;
</script>

<div style="width=400;height=400"><img src=js_beispiele/27_arbeiten_bilder/sparschwein.jpg name="sparschwein" width="150"></div>

Dieser Skript macht eigentlich das gleiche wie das Vorgängermodell, nur dass über window.setTimeout() die Funktion immer wieder aufgerufen wird und gleichzeitig für die Breite ein Zähler mitläuft.

Filter für Bilder

Der Internet Explorer besitzt ab der Version 6+ alle möglichen Filter, ähnlich denen, die man aus Bildverarbeitungsprogrammen kennt. Netscape kennt diese Filter nicht, so dass Seiten, die mit diesen Filtern arbeiten, völlig unterschiedlich aussehen. Man wird sehen, was die Zukunft bringt. Auf jeden Fall kann man sich mal ein Bild machen, was unter Umständen in Zukunft möglich ist.

  Bildfarbe invertieren

Hier ein Beispiel. Beide Bilder verwenden die gleiche jpg-Datei

Der Effekt wurde nicht dadurch erreicht, dass das Bild mit einem Bildverarbeitungsprogramm verändert wurde, sondern mit einem CSS Filter aus dem Internet Explorer.

<img id="sparschwein" style="filter:Invert()" src="parschwein.jpg">

  Ein Bild umwandeln in ein schwarz/weiß Bild

Auch dieses Bild ist dasselebe wie oben, wurde also nicht mit einem Bildverarbeitungsprogramm bearbeitet.

Man erreicht diesen Effekt durch den Filter XRay()

<img id="sparschwein" style="filter:XRay()" src="sparschwein.jpg" >
  Wellen über ein Bild legen

Ob sich mit dem Filter Wave irgendetwas ästhetisch Überzeugendes produzieren lässt, sei dahingestellt, auf jeden Fall sieht es so auch.

<img id="sparschwein" style="filter:Wave(freq=10, light=20, phase=90, strength=1,add=0);" src="sparschwein.jpg" >

Hierbei steht freq für die Anzahl der Wellen.
 

Bild horizontal spiegeln

Eine Graphik horizontal bzw. vertikal spiegeln

<img id="sparschwein" style="filter:flipV();" src="sparschwein.jpg" >
 

Bild vertikal spiegeln

Eine Graphik horizontal bzw. vertikal spiegeln

<img id="sparschwein" style="filter:flipH();" src="sparschwein.jpg" >
 

Alpha Filter

Der Alpha-Filter erlaubt es, die Deckkraft eines Elementes zu verändern.

<img id="sparschwein" style="filter:Alpha(opacity=90, finishopacity=10, style=2)" src="sparschwein.jpg" >
 

Blur Filter

Mit dem Blur-Filter kann man einen "Verwisch"-Effekt erzielen.

<img id="sparschwein" style="filter:Blur(direction=135, strength=20)" src="sparschwein.jpg" >
Wasserball
Wasserball
  

Wave Filter

Mit dem Wave-Filter kann ein Objekt wellenförmig verzerrt werden.

<div style="width:100%; font-size:20pt; color:blue;filter:Wave(freq=2, light=40, phase=0, strength=7);">Wasserball</div>

 
Wasserball
Wasserball
 Shadow Filter

Mit dem Shadow-Filter kann ein Schatten um ein Objekt gelegt werden, der auch einen Schatten-Verlauf aufweisen kann.

<div style="width:100%; font-size:20pt; color:blue;filter:Shadow(color=#888888, direction=45);">Wasserball</div>

vorhergehendes Kapitel
nächstes Kapitel