-
Notifications
You must be signed in to change notification settings - Fork 4
Animation
Slidbobo edited this page Mar 4, 2015
·
2 revisions
Im folgendem Code Block findet ihr den Prototypen zur Animation der historischen Kartenausschnitte. Der Kommentar erklärt die Anpassung, die noch gemacht werden müsste, damit die Animation mit der Schnittstelle funktioniert.
<!DOCTYPE html>
<html>
<head lang="de">
<meta charset="UTF-8">
<title>Animation</title>
<script>
/*
Anstatt dieses Arrays mit JSON-Objekte müsste hier der Ajax-Request zur OHDM API stehen.
Die API müsste ein gleich strukturiertes Array mit JSON-Objekten zurückliefern,
damit die Animation funktioniert
*/
var images = [
{src:"image/tile1.jpg", date: "2014-12-01"},
{src:"image/tile2.jpg", date: "2012-12-01"},
{src:"image/tile3.jpg", date: "2010-12-01"}
];
var next = 0; //Index des nächsten Bildes
var delay = 1500; //Verzögerung in Millisekunden
function animation() {
document.destinyImage.src = images[next].src;
document.destinyImage.alt = "Image from " + images[next].date;
next++;
if (next==images.length) {
next = 0;
}
setTimeout("animation();", delay);
}
</script>
</head>
<body onload="animation();">
<img src="" name="destinyImage" style="margin: 0 auto; display: block;" />
</body>
</html>