|
Sie sind hier: Startseite >> Tipps & Downloads >> Tipps für den "Selbstvollender" - Teil 9
|
Einfache und nützliche Tipps für den "Selbstvollender" - Teil 9 |
Wie kann man ein Popup-Fenster in einer bestimmten Größe aus einer Image Map öffnen? Eine Image Map oder auch cursorsensitive Map, d.h. ein Bild, in dem ein transparenter Bereich mit einem Link versehen ist, kann mit Hilfe eines guten HTML-Editors wie z.B. Dreamweaver problemlos erzeugt werden. Dagegen ist die Erstellung einer cursorsensitiven Map in den gängigen Content Management Systemen wie Joomla oder auch Plone alles andere als leicht, da viel map-spezifischer Quellcode erstellt werden muss (zum Quellcode weiter unten mehr). Gehen wir von einer bereits erstellten cursorsensitiven Map auf einem Bild aus. Nun soll der bestimmte Bereich, in den meisten Fällen eine Rechtecksfläche über einem Bild, so verlinkt werden, dass die Zielseite (kann auch eine vergrößerte Darstellung eines Bildes sein) sich in einem Popup-Fenster von vorbestimmter Größe öffnet. Ein Beispiel hierzu finden Sie nachstehend. Auf dem Bild unten mit der Dimension 400x400 Pixel wurde im unteren rechten Quadranten ein cursorsensitiver Bereich (zwecks optischer Darstellung hier hellgrün eingefärbt) der Größe 200x200 Pixel erstellt.
Im Gegensatz zur Verlinkung/Vergrößerung ausgehend von einem kleinen Vorschaubild (s. hierzu Teil 8: Wie erzeugt man schlankes HTML aus Word-Dateien ?) funktioniert das Verlinken bei einem cursor-sensitiven Bereich innerhalb eines Bildes nur direkt, d.h. es muss als Zielseite bei "href=' ' " eine bereits existierende HTML-Seite (s. unten) eingegeben werden. Wichtig ist es, dass die Zielseite in einem neuen Fenster geöffnet wird, also als Attribut target="_blank" zum Link formuliert wird. Auf der Zielseite stellt man mittels des folgenden Quellcodes die Fenstergröße ein: <body onload="javascript:window.resizeTo(500,800);">. Auf diese Weise wird das Popup-Fenster nach dem Öffnen im Browser auf eine Breite von z.B. 500 Pixel und eine Höhe von z.B. 800 Pixel dimensioniert.
Der Quellcode für die oben im Bild erstellte cursorsensitive Map lautet: <img src="../images/emmy_400x400.jpg" alt="Golden Retriever Hündin Emmy" width="400" height="400" border="0" usemap="#Map" title="Golden Retriever Hündin Emmy"/> Für die Bestimmung eines Rechtecks ( shape="rect" ) genügen zwei x-/y-Koordinaten-Paare ( coords="x1,y1,x2,y2" ): Eckpunkt links oben (x1,y1) und Eckpunkt rechts unten (x2,y2). Der Quellcode des Bildes muss dann, analog dem oben stehenden Beispiel, umgebaut und um das Attribut usemap="#Map" ergänzt werden, das eine Verbindung zur Map herstellt. Im map-Tag wird eine id vergeben, über ein name-Attribut wird die Verknüpfung zum Bild (im img-Tag, s.o.) hergestellt. Im map-Tag sind insbesondere die sensitiven Bereiche im Bild über das area-Tag eingebunden. Neben der einfachen Rechteck- oder wie hier Quadratform lassen sich die zu verlinkenden Flächen auf einem Bild auch als Kreis oder als Vieleck / Polygon erstellen.
|
