Fast Image-Map 2 – Anleitung.

Es handelt sich um ein kleines Programm, mit dem sog. Image-Maps erstellen kann. Das sind Bilder (jpg oder gif), in die beliebige Flächen eingezeichnet werden, die sich dann vom Gesamtbild abheben und die mit weiteren Webseiten verlinkt werden können. So kann man z.B. eine Landkarte der letzten Reise als Foto speichern und dort z.B. die Ortschaften, zu denen man besondere Bildergalerien erstellt hat, hervorheben und dann mit den Bildergalerien verlinken, dh. fährt man mit der Maus über solch eine Verweisfläche (Ortsname) ändert sich der Cursor in eine Hand und durch einen Klick auf den Ortsnamen (Verweisfläche) erscheinen die Bildergalerien dazu.

Durch einen Klick auf das folgende Vorschaubild können Sie sich ein Beispiel dazu ansehen:

 Die Bilder in die man besondere Bereiche markieren will müssen als -.jpg oder -.gif vorliegen. Man muss also ggf. zunächst das Bild konvertieren und dann am besten gleich in die richtige Webbildgröße z.B. 800x600 Pixel verkleinern. (Dazu kann man z.B. das kostenlose IrfanView verwenden.). Anschließend sollte man mit Hilfe eines Grafikprogramms die Bildteile hervorheben, die später als Verweisfläche im Bild benutzt werden sollen. In meinem Beispiel habe ich Ortsnamen in einer Russlandkarte besonders hervorgehoben.

Man integriert zunächst das Bild, das Verweisflächen erhalten soll in die eigene Webseite und speichert alles wie für die Webseite gewohnt ab, d.h. das Bild muss bereits in einem Ordner liegen, der auch später auf dem Server des Webproviders erscheint.

Sie finden FastImageMap 2.2.1 unter folgender Adresse:https://www.heise.de/download/product/fast-image-map-51488 

 Man öffnet Fast Image-Map 2 und wählt unter „Datei“ „Neu“ eine neue Seite. Es springt ein neues Fenster auf, in das man zunächst einmal den Namen der neuen Image-Map eintragen muss. In der nächsten Zeile muss man das Bild auswählen, in das man die Bereiche (Verweisflächen) eintragen möchte, die verlinkt werden sollen. Man klickt dazu ganz rechts der Zeile „Bilddatei für die Image Map“ auf die kleine Schaltfläche und sucht das gewünschte Bild aus, das man zuvor, wie oben beschrieben, bearbeitet und fertig für die Webseite integriert und abgespeichert hat. Man gibt dann noch einen Beschreibungstext und die Randbreite an (das ist ein Rahmen, der um das Gesamtbild erstellt wird) und klickt auf „OK“. Unter „Image-Map“ in der Menüleiste und dort unter „Eigenschaften“ kann man diese Einstellungen später auch noch verändern.

Die Bereiche, die verlinkt werden sollen, erstellt man, indem man in der Symbolleiste rechts auf das Viereck, den Kreis oder die unregelmäßige Form mit gelben Strahlen klickt. Beim Viereck oder dem Kreis setzt man die Maus in das Bild, drückt die linke Taste hält sie fest und zieht die Maus soweit, bis die gewünschte Größe der Form ungefähr erreicht ist. Lässt man die Maustaste los, erscheint das Viereck bzw. der Kreis mit Anfassern, das sind kleine Vierecke an Ecken bzw. im Kreisradius. Unregelmäßige Figuren machen u.U. auch Sinn, wenn man z.B. irgendwelchen Formen ungefähr folgen möchte. Dazu klickt man das Symbol mit der unregelmäßigen Fläche an, setzt den Mauszeiger an eine Stelle, wo die Verweisflächenbegrenzung entlang laufen soll, klickt dorthin, zieht die Maus zum nächsten gedachten Punkt klickt dort wieder usw., bis man eine Form geschlossen hat. Als letzten Klick macht man einen Rechtsklick, womit man die Verweisfläche erstellt hat, es erscheinen jetzt an den Eckpunkten auch Anfasser. Setz man die Maus in eine Verweisfläche verwandelt sich der Cursor in eine kleine Hand. Klickt man jetzt in die Form hinein, kann man die Form mit gehaltener Maustaste genau dorthin schieben, wo man sie haben möchte. Zieht man an den Anfassern, kann man die Form auch noch vergrößern oder verkleinern.

Im nächsten Schritt muss jetzt diese markierte Fläche verlinkt werden: Die Fläche muss markiert sein, dh. die Anfasser müssen zu sehen sein. Links vom Bildfenster unter „Eigenschaften der Verweisfläche“ wählt man das Register „Zieladresse“ und trägt dort die Zieladresse der Webseite ein, die beim Klick auf diesen Bildbereich sich öffnen soll. Man gibt dann noch einen Beschreibungstext ein und den Zielframe. Unter „Java Script“ kann man Mausgesten einstellen. Unter „Koordinaten“ werden die Koordinaten des Bereichs im Grundbild angegeben. Schließlich kann man noch auf das Register „Verweisfläche“ klicken. Man kann darunter einfach eine Verweisfläche duplizieren (Man stellt dann den Mauszeiger in die Verweisfläche, die Hand erscheint, und schiebt dann die duplizierte, also obere Fläche einfach dorthin, wo man sie haben möchte. Hat man eine Fläche markiert, kann man sie durch Klick auf die Schaltfläche „Verweise löschen“ löschen. Schließlich kann man der Grafik noch einen farbigen Rahmen geben (Farbe: Man klickt dazu auf die kleine Schaltfläche mit dem farbigen Gitter, wählt eine Farbe aus und klickt auf „OK“. Auf diese Art und Weise erstellt man jetzt alle Verweisflächen und verlinkt und bearbeitet sie.

Anschließend muss die komplette Image-Map in die eigene Webseite integriert werden: Es gibt drei Wege:

  1. In der Befehlszeile unter „Image Map“ auf den Eintrag „In neue HTML Datei einfügen“ klicken. Es erscheint ein Fenster, in dem der neue Quellcode für die Verweisflächen markiert ist. Man geht jetzt auf „Speichern unter“ und wählt dort die HTML-Datei in der das Bild steht und klickt auf „Speichern“, anschließend auf „Fenster Schließen“. Man kann auch den markierten Text in die Zwischenablage kopieren (Strg + C), öffnet dann den gewohnten Webseiteneditor, geht in das Register bzw. die Ansicht „Quelltext“ und kopiert über Strg + V den Code hinter den ersten Tag <body>. Anschließend speichert man neu ab und kann dann versuchsweise die Webseite mit einem Browser zu öffnen. An der Stelle der Verweisfläche, die ja u.U. zur besseren Erkennung durch einen farblich abgesetzten Rahmen deutlicher gemacht worden war, erscheint jetzt, wenn man die Maus darüber fährt eine Hand als Zeichen für einen Link. Ein Klick auf diesen Link öffnet die zu dieser Verweisfläche vorher verlinkte Seite.

  2. In der Befehlszeile unter „Image Map“ auf den Eintrag „In bestehende HTML-Datei einfügen“ klicken. Es erscheint ein Fenster, in dem man die Webseite suchen muss, in der das mit Verweisflächen versehene Bild sich befindet. Man klickt auf „Öffnen“ und setzt im neuen sich öffnenden Fenster den Cursor hinter den ersten Tag <body> und klickt dann oben im Fenster auf „Definition einfügen“. Anschließend je ein Klick auf „Speichern“ und „Fenster schließen“. Man kann jetzt die Webseite wie oben beschrieben aufrufen und sich das Ergebnis ansehen.

  3. In der Befehlszeile unter „Image Map“ auf den Eintrag „In die Zwischenablage kopieren“ gehen, dann öffnet man den Webseiteneditor und dort den Quellcode, stellt den Cursor hinter den ersten <body> - Tag und kopiert über Strg + V den Code an die richtige Stelle im Quellcode der Webseite.

Sollte jetzt das Bild mehrmals im Browser erscheinen, dann hat man den Quelltext falsch eingegeben, was aber nicht wirklich schlimm ist. Man öffnet dazu seinen Webseiteneditor und löscht in ihm das alte noch nicht mit Verweisflächen versehene Bild. Speichern nicht vergessen – fertig.

Anmerkung: Man kann diese, mit der Image Map versehenen Seite,  später mit MS Frontpage weiter bearbeiten und die Links z. B. verändern. Mit nvu funktioniert das leider nicht.