Top im Web
Webpublishing mit Dreamweaver und Fireworks
Kurs der Volkshochschule Bern

Hier gehts zurück zur Übungs-Übersicht

Übung 14: Popup-Fenster

Achtung: Diese Übungen werden seit Jahren nicht mehr aktualisiert und enthalten teils Aussagen, die inzwischen völlig veraltet und überholt sind. Sie sind nur noch aus Archiv- und Nostalgiegründen hier abrufbar.

Wer kennt das Problem nicht: Man möchte eine möglichst schnell ladende Seite machen und Platz bei der Ladezeit der Bilder sparen - was aber heisst, dass bei einem Klick auf die Thumbnails meistens ein hässliches grosses Browserfenster mit target=_blank aufgeht, das irgend eine Grösse hat und nicht wirklich schön ist.

Was also tun, damit das ganze einigermassen attraktiv wird? Richtig: Javascript hilft, und Dreamweaver hilft noch mehr. Unter "Verhalten" finden wir die Funktion "Browserfenster öffnen" - genau, was wir brauchen.

Zuerst das zu öffnende Fenster machen

Wie so oft im Webpublishing muss man nun schon etliche Schritte voraus denken, so muss z.B. die Grösse und Beschaffenheit des aufgehenden Fensters klar sein. Will man Scrollbalken oder nicht? Welche Browserleisten will man anzeigen? Wieviel Leerraum will man ums Bild herum haben, wenn man denn ein Bild verlinkt? Wie gross muss folglich das Fenster in Pixeln genau sein?

Gehen wir in dieser Übung davon aus, dass wir eine Thumbnail-Liste haben - beim Klick auf die kleinen Bilder erscheint eine grössere Fassung in einem Browserfenster. Zuerst muss also einmal eine leere HTML-Seite her, denn ein Popup besteht immer aus einer mit was auch immer gefüllten Webseite. Bei uns muss da also ein Bild rein - die grössere Fassung eben.

Um Ordnung zu schaffen, brauchen wir zuerst mal einen Ordner, wo diese Dateien drin sind - vielleicht sogar die grösseren Bilder selbst. Das ist aber Ihnen überlassen. Bei mir sieht der Ordner mit allen Popups so aus:

Also immer schön eine HTML-Seite und ein Bild, die aber gleich heissen, sodass sie schön untereinander stehen. Wie Sie sehen, bin ich aber nicht immer ganz konsequent :) Hauptsache, der Anfang des Dateinamens ist identisch.

Wichtig ist zu wissen: wie gross ist das Bild, das erscheinen soll? Zuerst müssen wir das Bild also in Photoshop o.ä. auf die richtige Grösse trimmen. Nehmen wir an, die Thumbnails seien bereits gemacht und bereit - und die grosse Fotofassung habe die das Format 640x480 Pixel. Zuerst öffnen wir also eine Seite (in unserem Beispiel weisser Hintergrund uns sonst nix - kann natürlich von Ihnen anders gewählt werden), speichern sie unter einem bestimmten Namen, pflanzen das Bild ein (zentriert!)...

...und vollführen noch einige Kniffs: Unter dem Bild soll ein Text folgen, der das Schliessen des Popups ermöglicht. Zusätzlich können Sie das Bild ebenfalls mit diesem Link versehen - er lautet "javascript:self.close();". Statten Sie das Bild mit einem ALT-Text aus (à la "Hier klicken zum Schliessen" oder so).

Wenn Sie Ihre User für ganz Gescheit halten, können Sie den Text auch weglassen und hoffen, dass die Leute drauf kommen, aufs Bild zu klicken (ALT-Text darf dann keinesfalls fehlen).

Ebenfalls elegant (aber kaum verbreitet - und ein Eingriff in die Freiheit der User) wäre die Lösung, dass sich das Fenster selbst schliesst, sobald man das Fenster verlässt - siehe hier (Abschnitt "Close Pop-up Window"). Dies ist übrigens eine gute Gelegenheit den Macromedia-Newsletter "The Edge" vorzustellen, den Sie abonnieren sollten! Spätere Hilfe und Tipps finden Sie aber auch in Foren wie diesen.

So, wir sind nun fast bereit! Nun müssen wir noch abschätzen, wie gross das Fenster tatsächlich werden muss. Oben, rechts und links vom Bild soll ja noch etwas Weissraum sein, und unten steht ja noch der Text... 680x545 Pixel wird die Lösung sein, manchmal braucht es noch ein wenig Feinjustierung im Nachhinein. Jetzt aber zur Verlinkung dieses Fensters!

Den Link auf das Popup setzen

Wenn wir ein Bild mit einem Link versehen wollen, ist das kein Problem - man kann right away loslegen. Wenn wir aber ein Stück Text verlinken möchten, muss aber zuerst dem zu verlinkenden Text (beim Klick auf den Text soll eben das Fenster aufgehen) ein "Dummy-Link" verpasst werden, d.h. ein leerer Link, bei dem alleine an sich nichts passiert. Ohne diesen Leeren Link kann man leider keine Verhaltensweisen anhängen.

Also: Text markieren und in die Linkzeile "javascript:;" (ohne Anführungszeichen) eintragen:

Damit haben wir unseren leeren Link. Früher pflegte man einfach einen "Gartenhag" (#) zu machen, was aber in vielen Browsern dazu führte, dass man damit auf der Seite, die den Link enthielt, auch gleich ganz nach oben hüpfte - ein unangenehmer Nebeneffekt.

Nun können wir uns daran machen, den Link zu vergeben - dazu einmal in den zu verlinkenden Text klicken oder das Bild einmal anklicken, dann in die Bedienfeldgruppe "Verhalten" wechseln und die korrekte Funktion wählen:

Im nun folgenden Fenster muss man alle Werte eintragen, die relevant sind - vor allem den Namen der Datei, die das grosse Bild enthält. Sie können diesen einfach mit "Durchsuchen" wählen; dazu kommen die erwähnten Grössenangaben:

Hinweis: Versuchen Sie selbst, was passiert, wenn Sie Häkchen bei allen oder einzelnen Attributen setzen! Ein Scrollbalken ist hier unnötig - bei längeren Textseiten, die in einem Popup aufgehen, ist er aber obligatorisch.

Fertig ist die Sache - wenn Sie nachträglich noch Anpassungen vornehmen wollen, kein Problem: Markieren Sie den Bild- oder Textlink zum Popup, gehen Sie zum Bedienfeld "Verhalten" und doppelklicken Sie die Funktion:

Es wird sogleich das oben vorgestellte Fenster erscheinen, wo Sie alle gewünschten Angaben machen können. Übrigens können Sie jederzeit auch die Funktion ändern, die zum Popup führt (z.B. Doppelklick oder MouseOver statt Klick - überlegen Sie aber, ob das sinnvoll ist...) - nämlich mit einem Klick auf der Pfeil nach unten:

Wie Sie sehen, können Sie hier verschiedenste Verhaltensweisen einstellen.

Hinweis: Wählen Sie "Ereignisse zeigen für" > "Browser ab 4.0" aus.

Als Zückerchen zum Schluss: Wollen Sie, dass das Popup immer genau in die Mitte des Bildschirms springt? Fügen Sie dieses Javascript in den HEAD des Popupfensters sein, tragen Sie aber immer GENAU die Masse ein, die das Popup hat (hier 510x440):

<script language="JavaScript">
windowWidth=510;
windowHeight=440;
if (parseInt(navigator.appVersion) >= 4)
window.moveTo((screen.width/2)-
(windowWidth/2+10),(screen.height/2)-
(windowHeight/2+20));
</script>

Hier gehts zurück zur Übungs-Übersicht

Achtung: Diese Übungen werden seit Jahren nicht mehr aktualisiert und enthalten teils Aussagen, die inzwischen völlig veraltet und überholt sind. Sie sind nur noch aus Archiv- und Nostalgiegründen hier abrufbar.