Vergrößern der Grafikdatei
| Einleitung | Software-Sammlung | FramedCloud-Popups | Grafikdatei | FramedCloud.js | Kompilieren |
In diesem Abschnitt wird erklärt, wie die Grafikdatei cloud-popup-relative.png eingeteilt ist und wie man sie vergrößern kann.
Jedes DecorationDiv enthält die Grafik cloud-popup-relative.png, die jeweils so verschoben wird, dass die vier runden Ecken und die Nase passend im Popup platziert sind. Da die DecorationDivs die Eigenschaft „hidden“ besitzen (aus Framed.js), wird die Grafik quasi wie ein Bastelbogen auf Maß zerschnibbelt. Es ist jetzt auch leicht einzusehen, dass das Popup nicht beliebig groß werden darf, da sich sonst Lücken im Rahmen ergeben würden.
Im Bild ist die originale Datei cloud-popup-relative.png zu sehen, wobei die grüne Fläche tatsächlich transparent ist. Es ist eine große weiße Fläche mit den vier runden Ecken zu sehen und darunter vier weiße „Nasen“ (engl. stem), die später in der Karte auf den Ortspunkt zeigen sollen.
Um die Grafik mit den originalen Abmessungen von 1276x736 px zu vergrößern, kopiert man im Grafikprogramm einen Streifen der Grafik, schneidet sie anschließend durch und fügt den Streifen pixelgenau ein. Die cloud-popup-relative.png auf meiner Webseite ist 1276x1383 px groß.
Wie groß die Grafikdatei letztendlich sein muss, hängt einerseits von der gewünschten Content-Größe (plus der Abstände zwischen Popuprand und Content) ab, andererseits von der Größe des inneren Browser-Fensters, in dem der Content ohne Scrollbalken dargestelt werden soll. Lange Rede, kurzer Sinn: Mache dir vorab Gedanken über die gewünschte maximale Popupgröße und wie sie auf welcher Bildschirmgröße dargestellt werden soll, spiele mit den Werten im Javascript und probiere es im ol2-Master mit verschiedenen Browsern aus!