template

Index :: Javascript :: Kachel-Scrolling

Im DIV (fett gestrichelt) ist immer nur ein Teil der Kacheln sichtbar, aus denen sich das Gesamtbild zusammensetzt.

• Vorteile
• Essentielle Fragen
• Prinzip des Scroll-Vorgangs
• Aufbau im HTML-Code
• Beispiel: Weltkarte/Zeitzonen (Autoscroll)
• Beispiel: Zeichnung (Dragging) mit Navigations-Thumbnail

Vorteile

• Es werden im Bildausschnitt jeweils nur eine Anzahl kleinerer Grafiken benötigt, d.h. aufgrund geringer Ladezeiten ist schnell ein visuelles Ergebnis vorhanden.
• Die (festgelegte) Anzahl der clientseitig präsentierten Kacheln ist unabhängig von der Gesamtanzahl der auf dem Server zur Verfügung stehenden Kacheln, d.h. die komplette virtuelle Grafik kann beliebig groß sein - die Ladezeit der sichtbaren Fläche bleibt immer die gleiche.
• Bei Verwendung einer ID-Map (2-dimensionales Array mit Kachel-Kennungen) ist es möglich, die Teilbilder - vergleichbar mit Mosaik-Bausteinen - mehrfach und an beliebiger Stelle im Raster zu arrangieren. Auf diese Weise können bereits mit einer geringen Menge an Kacheltypen komplexe Gesamtbilder erzeugt werden; eine Methode, die oft in Spielen angewendet wird, um Level-Hintergründe zu konstruieren.
• Der Algorithmus zur clientseitigen Anordnung der Kacheln kann am Bildrand einen fließenden (seamless) Übergang implementieren: Wird über den Rand hinaus gescrollt, lassen sich Kacheln des gegenüberliegenden Randes ansetzen, wodurch der Effekt eines unendlich großen Parketts entsteht.
  Dies kommt allerdings nur bei Grafiken bestimmten Inhalts in Betracht, z.B. bei Weltkarten (und auch hier nur für das Endlos-Scrollen entlang der X-Achse).

Essentielle Fragen

• Wie groß ist eine Kachel (Kantenlänge in Pixeln)?
  Hier spielen mehrere Faktoren eine Rolle:
  
  • Die ganzzahlige Teilbarkeit der Kantenlängen des Basisbilds.
  • Der optische Inhalt des Basisbilds (das eventuell bereits rechteckige Bereiche enthält und eine dementsprechende Aufteilung nahelegt).
  • Die anderweitige Verwendung der Kacheln (z.B. als eigenständige Grafiken in einem anderen Zusammenhang).
  • Die entstehende Dateigröße einer Kachelgrafik.
  
  Und nicht zuletzt existieren natürlich auch subjektive Gesichtspunkte:
  
  • Der Arbeitsaufwand, das Original in Teilbilder zu zerlegen.
  • Die Menge an Kacheln (zu verwaltende/verschiebende Einzelbilder), die man der Javascript-Engine des Browsers zumuten möchte.
• Aus wievielen Kacheln besteht das Basisbild insgesamt?
  Sobald die Kachelgröße feststeht, ist dies rein rechnerisch einfach zu ermitteln.
  Später wird entweder Pixelgröße oder Kachelanzahl des Basisbilds benötigt, um zu entscheiden, wie weit im Anzeigebereich herumgescrollt werden darf/kann.
• Wieviele Kacheln werden clientseitig maximal angezeigt?
  Dies ist abhängig von der gewählten Größe des DIV-Containers und wird für Breite und Höhe separat berechnet.
  Als allgemeine Faustformel gilt für eine Kante: N = 2 + VolleKachelnAuf(AnzeigeKantenPixel-2)
  Beispiel: Eine Kachel ist 64 Pixel breit, der DIV ist 200 Pixel breit.
  N wäre dann 2 + VolleKachelnAuf(200-2), d.h. 2 + int(198/64) bzw. 2 + Math.floor(198/64);
  Ergebnis: N = 5, d.h. in der Breite sind maximal 5 Kacheln sichtbar; die äusseren meist nur teilweise.
  Betreffend der Höhe erfolgt eine analoge Berechnung.
• Nach welchem System sind die Namen der Image-Dateien aufgebaut?
  Es bietet sich an, die X/Y-Position der Kachel im Basisbild zu verwenden, z.B. tile_9_14.jpg für explizite Koordinatenangabe, oder pic43.jpg bei durchlaufender Nummerierung.
  Auf diese Weise kann Javascript die Namen der benötigten Dateien bequem zusammenbauen.
  Denkbar sind jedoch auch andere Benennungssysteme, die sich am Einzelfall orientieren.

Prinzip des Scroll-Vorgangs

Aufbau im HTML-Code

<div style='WIDTH:200;HEIGHT:200;POSITION:relative;OVERFLOW:hidden;'>

<img id='it0' src='img/tile0.jpg' style='POSITION:absolute;LEFT:0;TOP:0;'>
<img id='it1' src='img/tile1.jpg' style='POSITION:absolute;LEFT:70;TOP:0;'>
<img id='it2' src='img/tile2.jpg' style='POSITION:absolute;LEFT:140;TOP:0;'>
<img id='it3' src='img/tile3.jpg' style='POSITION:absolute;LEFT:210;TOP:0;'>

</div>

IMG.src = 'img/tile27.jpg';

IMG.style.left = -12;
IMG.style.top = 20;

Beispiel: Weltkarte/Zeitzonen (Autoscroll)

Javascript im Header
function $(id) { return document.getElementById(id); }

var wk_x=136,wk_d,Tim;
function wk_Tick() {
  var o=575-(wk_x=(wk_x+576+wk_d)%576);
  $('iwk0').style.left=((o+192)%576)-192;
  $('iwk1').style.left=((o+384)%576)-192;
  $('iwk2').style.left=o-192;
  if (Tim) Tim=window.setTimeout('wk_Tick()',50);
  return false;
}
function wk_Mov(d) {
  wk_d=d*4; Tim=true; wk_Tick();
}
document.onmouseup=function(){
  if (Tim) { window.clearTimeout(Tim); Tim=0; }
}

Weiter unten, im BODY, die Tabelle mit den Bedienungselementen und dem Anzeigebereich:
<table align='center' bgcolor='#A0A0A0' cellspacing='1' cellpadding='0'><tr bgcolor='#D0D0D0'>

Linke Schaltfläche
 <td style='PADDING:0 8;CURSOR:pointer;' onMouseDown='return wk_Mov(-1);'><img src='img/Le.gif'></td>

Zelle mit DIV-Container
 <td><div style='WIDTH:340;HEIGHT:340;POSITION:relative;OVERFLOW:hidden;'>
 <img id='iwk0' src='img/tzone0.gif' style='POSITION:absolute;LEFT:-136;TOP:0;'>
 <img id='iwk1' src='img/tzone1.gif' style='POSITION:absolute;LEFT:56;TOP:0;'>
 <img id='iwk2' src='img/tzone2.gif' style='POSITION:absolute;LEFT:248;TOP:0;'></div></td>

Rechte Schaltfläche
 <td style='PADDING:0 8;CURSOR:pointer;' onMouseDown='return wk_Mov(1);'><img src='img/Ri.gif'></td>

</tr></table>

Beispiel: Zeichnung (Dragging) mit Navigations-Thumbnail

Der Lehrer  Pieter Bruegel

Esel :: Der lernende Esel bezieht sich auf das lateinische Sprichwort am unteren Bildrand: PARISIOS STOLIDUM SI QUIS TRANSMITTAT ASELLUM. SI HIC EST ASINUS NON ERIT ILLIC EQUUS. (Darunter steht die niederländische, freie Übersetzung: Selbst wenn man einen Esel auf die Schule schickt, bleibt er ein Esel und kommt nicht als Pferd zurück)

Person im Fenster :: Parodistische Anspielung auf das geheimnisvolle Gesicht in diversen Gemälden Hieronimus Boschs.

Reisig-Rute :: Als schlagendes Argument für unverständige Schüler muss die Rute immer griffbereit sein.

Brotkasten :: Der aus dem Behälter ragende Teller und die Wurst an der Schnur weisen auf eine Futterkiste hin.

Kauernde Gestalten :: Parodistische Anspielung auf die grotesken Figuren in Hieronimus Boschs Gemälden.

Pillermann :: Ein Schüler, der mit natürlicher Anmut seine Blöße zur Schau stellt.

Schriftzug 'Bruegel Inventor' :: Hinweis auf Pieter Bruegel (den Älteren) als Urheber der Vorlage zu diesem Stich.

Schriftzug 'COCK EX 1557' :: Hinweis auf den niederländischen Verleger Hieronymus Jérôme Cock (ca. 1510-1570), der Bruegels Zeichnungen als Stichreproduktionen veröffentlichte.

Index :: Javascript

template