Webdesign – Javascript
Animierte Bilder

DeveloperIT-ProjekteOffice-AnwendungenSoftware

Ein weiterer interessanter Trick mit Bildern: Aus statischen Bildern bastelt man sich eine kleine Animation.


Animierte Bilder ___

Ein weiterer interessanter Trick mit Bildern: Aus statischen Bildern bastelt man sich eine kleine Animation. Dieser Tipp funktioniert auch mit Texten. Hierzu greifen Sie über Javascript auf dieValue- Attribute eines Formularfelds zu. Mit Hilfe dieses Umwegs lässt sich Text in der Animation darstellen. Dabei passen Sie das Formularfeld mit Hilfe von Stylesheets dahingehend an, dass es nicht mehr als textarea erkennbar ist:

Den Hintergrund setzen Sie auf transparent, der Rahmen (border) sowie die Scrollbalken (overflow) werden deaktiviert. Damit der Seitenbesucher nicht in das Feld schreiben kann, wird dieses auf readonly und disabled gesetzt.Den Namen benötigen Sie, um über Javascript darauf zugreifen zu können. Zuvor muss auch das Formular einen Namen bekommen:

Imnächsten Schritt passen Sie den Inhalt der Textfelder und auch der Bilder mit einer kleinen Javascript- Funktion an:

function wechsel() {
document.images.eins.src=”images/zwei.jpg”;
document.images.zwei.src=”images/drei.jpg”;
document.formular1.text1.value =”Neuer Text 1″;
document.formular2.text2.value =”Neuer Text 2″;
}

Über document.images.eins.src wird das erste Bild ausgewechselt, document.images.zwei.src ändert das zweite Bild.Mit document.formular1.text1.value wird dem erstenTextfeld neuer Inhalt zugewiesen, der aus einer Variablen bestehen kann.

Autor: swasi
Anklicken um die Biografie des Autors zu lesen  Anklicken um die Biografie des Autors zu verbergen