Javascript Bild umschalten

Seiteninhalt
Bilder Umschalten	Foto unsichtbar/sichtbar	Foto Größe, Breite und Höhe ändern

Bilder Umschalten mit Javacript

Bild auswechseln

In dem kleinen javascript Beispiel werden zuerst die Bilder in ein Array geladen. In der Javascript Function bilwechsel() wird die Variable Fotoindex um 1 erhöht, als nächstes wird geprüft ob die Varable schon größer als 3 ist, und falls ja dann wird sie auf 1 gestellt. Im letzten Schritt bekommt dann das SRC vom IMG seinen neuen Wert.

Foto zuordnen durch index oder durch Ident

Zum bearbeiten der Fotos durch javascript muss man sie zu ordnen. Eine Möglichkeit ist sie durch ihre Reihefolge auf der HTML Seite zu erkennen. Also durch das Index [0] im Image Array der Internetseite.
Dabei entspricht der Index 0 dem 1. Bild, Index 1 ist dann das 2. Bild usw.

document.images[0].src = "bild1.jpg";
document.images[1].src = "bild2.jpg";

Eine andere Möglichkeit ist dem Foto in HTML ein Ident zu geben und es dann durch dieses Ident im Javascript zuzuordnen.

<img src="meinbild100.gif" border="0" id="Bildident" />

document.getElementById("Bildident").src = "meinbild101.gif";

Foto unsichtbar und wieder sichtbar machen

Die Sytax also die schreibweise in Javascript sieht dafür so aus!

document.getElementById("Bildident").style.visibility = 'hidden';
document.getElementById("Bildident").style.visibility = 'visible';

Wenn man das bild durch HTML zwar laden und einen Platz auf der Seite zuweisen will aber es erstmal unsichtbar bleiben soll und man es erst später durch javascript sichbar machen will

<img src='bild1.gif' border='0' id="Bildident" style="visibility: hidden;">

Foto Größe, Breite und Höhe ändern

Mit Javascript lassen sich auch alle anderen Eigenschaften wie zB. die Breite und Höhe von Fotos dynamisch ändern!
Dynamisch, also nach dem die Internetseite schon geladen ist, durch Knopfdruck oder Mouse-Bewegung, aber auch druch Zeitsteuerung mit einem Timer.

document.images[0].height = 100;
document.images[0].width = 100;

Javascript Animationen

Mit javascript kann man die Fotos auf einer Internetseite in allen Eigenschaften verändern. So kann man viel Bewegung in eine Seite bringen und so viel mehr Aufmerksamkeit bei den Besuchern erreichen. Bewegte Bilder kann auch durch Javascript und nicht nur durch .gif erzeugen. Wobei die Möglichkeiten sehr viel Größer sind als das bei dem Bildformat .gif der Fall ist.