Bilder mit JavaScript
Hier ein kleines Skript, welches in ein Canvas jede Sekunde eine Uhr auf den Bildschirm malt.
<canvas width="800" height="400" id="myCanvas" >
Hier sollte die Uhrzeit stehen (HTMLT only)
</canvas>
<script>
function uhrzeit() {
var bild = document.getElementById("myCanvas");
var kontext = bild.getContext('2d');
var datetime = new Date();
hrs = datetime.getHours();
var min = datetime.getMinutes();
var sec = datetime.getSeconds();
factor60 = 2*Math.PI/60;
if (hrs > 12) hrs = hrs - 12;
factor12 = 2*Math.PI/12;
kontext.fillStyle='#000';
kontext.lineWidth = 50;
kontext.fillRect(0,0,800,400);
// Start und Ende sind tatsächlich die Vielfachen des Radius
kontext.beginPath();
kontext.strokeStyle = '#DB1F1F';
kontext.arc(400,200,150,4.712,hrs*factor12+4.712);
kontext.stroke();
kontext.beginPath();
kontext.strokeStyle = '#3A1FC2';
kontext.arc(400,200,100,4.712,min*factor60+4.712);
kontext.stroke();
kontext.beginPath();
kontext.strokeStyle = '#009614';
kontext.arc(400,200,50,4.712,sec*factor60+4.712);
kontext.stroke();
kontext.fillStyle = '#fff';
kontext.font="60px Arial";
kontext.fillText(hrs+':'+min+':'+sec,300,350);
// Verzögerung in Millisiekunden
setTimeout("uhrzeit()", 1000);
}
</script>
Das Image-Objekt kann auf folgende Weise referenziert werden:
document.grafikname (=> <img name="
grafikname
" ...>)
document.images[grafikname]
document.images[nr]
Die erste Methode verlangt eindeutige, einprägsame Namen, die im img-Tag mit name="name" zugewiesen werden.
Zweite Methode kann verwendet werden, wenn auch zum Beispiel auch document.forms[gleichername] existiert.
Auf das Feld src des Image-Objekt hat man Lese- und Schreibzugriff:
document.grafikname.src = "xxx.gif";
Beim Austauschen von Bildern solle jedoch darauf geachtet werden, dass Bilder durch gleichgroße Grafiken ersetzt werden, sonst müssen auch die Felder width und height verändert werden.
Verwenden des Image-Objekts unter Berücksichtigung älterer Browser.
Methode a)
Für ältere Browser werden, damit es nicht zu Fehlmeldungen kommt, Leerfunktionen eingebaut. Die Angabe im language-Attribut steuert die Ausführung für die unterschiedlichen Browser.
<SCRIPT LANGUAGE="JavaScript">
<!--
function over(){}
function out(){}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
function over(){
document.grafik.src = "galileo_over.gif";
}
function out(){
document.grafik.src = "galileo_out.gif";
}
//-->
</SCRIPT>
Methode b)
Einfacher ist es innerhalb der Funktion abzufragen, ob das Objekt unterstützt wird.
if (document.images)
...
Das Image-Objekt wird in der Regel durch mouseover angesprochen.
mouseover und mouseout unterstützt nur der IE im Image Tag. Also muß für alle anderen Browser ein A href mit # um das Bild gesetzt werden um die Handler verwenden zu können. (siehe Beispiel 17)
Das folgende Beispiel 17 tauscht Bilder beim überfahren mit der Maus aus (Roll-Over Images).
<HTML>
<HEAD>
<TITLE>Bildlein-Wechsle-Dich</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function over() {
document.grafik.src = "sitemapneu.gif";
document.grafik.width = 490;
document.grafik.height = 412;
}
function out() {
document.grafik.src = "sitemapneuls.gif";
document.grafik.width = 20;
document.grafik.height = 16;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<img src="sitemapneuls.gif" width="20" height="16" name="grafik" onMouseOver="over();" onMouseOut="out();" >
</BODY>
</HTML>
GIF-Bilder können zwar als Animationen gestaltet werden (animated GIF), sind aber auf maximal 256 Fraben beschränkt. Animationen mit JPEG-Bildern lassen sich mit JavaScript verwirklichen.
<HTML>
<HEAD>
<TITLE>JPEG-Animation</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript"><!--
if (document.images)
var bilder = new Array("ani1.jpg", "ani2.jpg", "ani3.jpg", "ani4.jpg");
var naechstesBild = 0; //Array-Index der n‰chsten Bildes
var verzoegerung = 1000; //Verz&Mac246;gerung in Millisekunden
function animation(){
document.ani.src = bilder[naechstesBild];
naechstesBild++;
if (naechstesBild==bilder.length)
naechstesBild = 0;
setTimeout("animation()", verzoegerung);
}
//--></SCRIPT>
</HEAD>
<BODY onLoad="if (document.images) animation()">
<H3>Animation</H3>
<IMG SRC="ani1.jpg" NAME="ani">
</BODY>
</HTML>
Der Wechsel erfolgt nach Ablauf einer bestimmten Zeit mit der Methode timeout() von window. Dieser Befehl verzögert das Ausführen:
window.setTimeout(Befehl, Verzögerung);
Die Angabe der Zeitspanne erfolgt in Millisekunden.
5000 = 5 Sekekunden
Besonders bei Roll-Over Effekten ist es störend, wenn das alternative Bild erst dann vom Server geladen wird, wenn der Mauszeiger über das Bild fährt. Bei langsamen Leitungen entsteht dann eine Wartezeit, die den Effekt zerstört. Daher werden auch die Grafiken die noch nicht sofort angezeigt werden bereits im Hintergrund geladen. Beim Roll-Over können sie dann sofort aus dem Speicher heraus angezeit werden.
Der Trick besteht im Anlegen eines eigenen neuen Image-Objektes.
var img = new Image();
img.src = "ani1.jpg";
Den Aufruf für die Preload-Routine solle man nicht in den body-Tag schreiben, da der Handler onLoad erst abgearbeitet wird, wenn der Body vollständig abgearbeitet worden ist. Das kann dazu führe das der Benutzer bereits Roll-Over Effekte auslöst, bevor das Preload durchgeführt wurde.
<BODY onLoad="preload()">
Also sollte der Preload-Aufruf im JavaScript des Head eingefügt werden. Da er ausserhalb einer Funktion steht, wird er bereits beim Interpretieren des Head abgearbeitet.
<HTML>
<HEAD>
<TITLE>Bildlein-Wechsle-Dich</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
img_over = new Image();
img_over.src = "in.gif";
function over(){
if (document.images)
document.grafik.src = img_over.src;
}
function out(){
if (document.images)
document.grafik.src = "out.gif";
}
//--></SCRIPT>
</HEAD>
<BODY>
<A HREF="#" onMouseover="over()" onMouseout="out()">
<IMG SRC="out.gif" NAME="grafik">
</A>
</BODY>
</HTML>
Das Beispiel lässt sich durch das Abfragen der Handler onAbort und onError noch sinnvoll erweitern.
<HTML>
<HEAD>
<META HTTP-EQUIV="refresh" CONTENT="30;url=animation.htm">
<!-- nach 30 Sekunden wird die Seite animation.html geladen -->
<TITLE>Animation vorbereiten</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function fertig(){
if (document.images[0].complete && document.images[1].complete && document.images[2].complete && document.images[3].complete)
location.href = "animation.html";
}
function abbruch(){
alert("Sie wollen das Laden abbrechen? Na gut, wir leiten Sie weiter...");
location.href="animation.html";
}
function fehler(){
alert("Beim Laden einer der Grafiken ist ein Fehler aufgetreten. Wir leiten Sie trotzdem weiter...")
location.href="animation.html";
}
//--></SCRIPT>
</HEAD>
<BODY>
<H3>Animation l‰dt... Bitte warten...</H3>
<IMG SRC="ani1.jpg" onLoad="fertig()" onAbort="abbruch()" onError="fehler()" WIDTH=1 HEIGHT=1>
<IMG SRC="ani2.jpg" onLoad="fertig()" onAbort="abbruch()" onError="fehler()" WIDTH=1 HEIGHT=1>
<IMG SRC="ani3.jpg" onLoad="fertig()" onAbort="abbruch()" onError="fehler()" WIDTH=1 HEIGHT=1>
<IMG SRC="ani4.jpg" onLoad="fertig()" onAbort="abbruch()" onError="fehler()" WIDTH=1 HEIGHT=1>
</HTML>
Herunterladen können Sie sich das Projekt unter: https://github.com/jackmoore/colorbox
Zunächst muss in den Kopf der HTML-Datei die Bibliothek (und das allgemeine jQuery) eingebunden werden:
<link rel="stylesheet" href="colorbox.css" type="text/css">
<script type='text/javascript' src="jquery-1.7.1.js"></script>
<script type='text/javascript' src="jquery.colorbox-min.js"></script>
Im BODY des HTML-Dokuments müssen sich Links befinden, die auf die Bilder zeigen. Ausgezeichnet mit einem gemeinsamen Klassennamen (hier: "Galerie").
<a class='gallery' href='image1.jpg'>Photo_1</a>
<a class='gallery' href='image2.jpg'>Photo_2</a>
<a class='gallery' href='image3.jpg'>Photo_3</a>
Damit die Galerie starten kann, muss sie aufgerufen werden. Aber erst wenn die Seite vollständig geladen wurde, also vor dem schliessenden Body-Tag einbauen:
<script type='text/javascript'>$("gallery").colorbox();</script>
Schön wird die Galerie aber erst, wenn man beim Aufruf der Colorbox zusätzlich die Parameter nutzt, die zur Verfügung stehen. Hinweise zur den Parametern findet man unter: http://www.jacklmoore.com/colorbox/
Mit folgenden Befehl lassen sich die Bilder z.B. zu einer Galerie zusammenfassen:
$("gallery").colorbox({rel: "gallery", opacity: 0.7, transition:"true"});