Sie sind hier: Startseite » Grafik-Tutorials » PS: Rollover Imagemap
Was eine Imagemap ist und wie diese funktioniert haben wir im A-Imagemaps-Workshop ausführlich durchgearbeitet. Photoshop-Besitzer sind nun in der glücklichen Lage, komplexe Imagemaps mit wenigen Handgriffen zu erstellen und können diese noch mit zusätzlichen Features versehen. Zu zeigen, wie das funktioniert ist Inhalt dieses Artikels
Die Aufgabenstellung lautet: Es soll eine Imagemap aufgebaut werden, welche mit einem Rollovereffekt die Bundesländer Österreichs unterlegt. Zusätzlich soll ein kleines Fenster mit Angaben erscheinen und beim Verlassen des Mauszeigers wieder verschwinden.
Ausgangspunkt ist diese sehr einfach gehaltene Karte (Bild 1). Diese wird, um weiter bearbeitet werden zu können, gleich einmal in eine neue Ebene (Ebenenpalette-RMT-Ebene duplizieren) kopiert und die Hintergrundebene gelöscht. Da Österreich neun Bundesländer besitzt benötigen wir noch einmal neun Ebenen, für jedes Land eine. Die neue Originalebene wird daher noch neun Mal kopiert und gleich mit aussagekräftigen Namen versehen.
Jetzt können wir bereits mit dem Einfärben beginnen. Aktivieren Sie dazu die jeweilige Ebene und wählen Sie das Füllwerkzeug aus. Stellen Sie die Farbe Ihrer Wahl ein und geben Sie eine Toleranz von 10 vor. Sollten nun beim Füllen einzelne Bereiche nicht mitgefärbt werden, so erhöhen Sie die Toleranz schrittweise, sollte die Farbe auslaufen, so verringern Sie die Toleranz. Wenn die Farbe bei einer Toleranz von 1 immer noch ausläuft, so haben Sie das Pech, daß sich irgendwo in den Begrenzungslinien ein Loch befindet. Das müssen Sie jetzt erst einmal suchen und schließen. Wenn alles klappt, so sollte das Ergebnis wie in Bild 2 aussehen. Bild 3 zeigt die Ebenenpalette dazu.
Jetzt wird es Zeit, zu IR zu wechseln. Klicken Sie auf die Schaltfläche ganz unten in der Toolbox. IR wird geöffnet und das Bild geladen. Sofern Sie es nicht schon getan haben, so blenden Sie jetzt die Fenster "Ebenen" und "Rollover" ein. Diese sind die Hauptwerkzeuge in den nächsten Schritten. Ausserdem sollten Sie bereits jetzt in den Optimierungsoptionen die Werte "gif", "selektiv", "diffusion" und Farben 8 einstellen, um webgerechte Dateigrössen zu erlangen.
Nachdem diese Voreinstellungen gemacht sind können wir mit dem Aufbau der Imagemap beginnen. Dazu wird das Imagemap-Werkzeug ausgewählt und in der Untergruppe "Polygon" aktiviert. Tip: In IR haben Sie die Möglichkeit, sich die Untergruppe als eigene Toolbox griffbereit irgendwohin zu legen. Am unteren Rand des Untermenüs sehen Sie einen kleinen Pfeil nach unten. Wenn Sie diesen anklicken, so löst sich das Menü aus der Toolbox.
Beginnen Sie nun, entlang der Begrenzungslinien Ankerpunkte zu setzen. Sie brauchen zu diesem Zeitpunkt auch noch nicht allzu pingelig zu sein, was die Position der Punkte betrifft. Denn Sie können, nachdem das Polygon geschlossen wurde die Punkte einzeln anwählen (Toolbox-Imagemap-Auswahlwerkzeug) und verschieben. Mit Umsch-Linksklick können auch neue Punkte hinzugefügt, mit Alt-Linksklick gelöscht werden (Bild 4).
Um eine Aussparung aus einem Area zu verwirklichen ist es nötig, die äussere Begrenzung mit der Inneren zu verbinden. Setzen Sie dazu so knapp wie möglich Ankerpunkte (Bild 5). Haben Sie alle Areas fertig, so bemerken Sie in der Rollover-Palette bereits die Imagemap-Ebenen. Wählen Sie diese nun nacheinander aus und ordnen Sie mit "RMT-Rolloverstatus hinzufügen" jedem ein "Over" zu. Nun muss jedem Status eine Ebenensichtbarkeit zugeordnet werden. Dazu wird der Status in der Rollover-Palette angeklickt, dann zur Ebenenpalette gewechselt und dort die zugehörigen Ebenen sichtbar geschaltet (Bild 6). Im Fenster "Imagemap" kann noch zusätzlich ein ALT-Text dazugefügt werden.
Wenn Sie nun die Vorschau aktivieren sehen Sie bereits die funktionierende Rollover-Map mit dem dazugehörigen Quellcode.
Wir sind mit unserer Aufgabenstellung aber noch nicht ganz fertig. Es sollen ja auch noch Fenster aufgehen. Dazu ist ein wenig Javascript-Know-How erforderlich. Ich setze hier einmal voraus, daß man weiss, wie eine HTML-Seite aufgebaut ist. Bauen Sie zunächst einmal mit einem Editor sämtliche Fenster, die aufgehen sollen. Fügen Sie jetzt ein kleines Javascript in den vorhandenen PS-Quelltext (head-Bereich) ein:
Anschliessend müssen Sie noch die Area-Tags modifizieren :
Damit sind Sie nun fertig. Zum Publizieren müssen Sie natürlich noch die Pfade an Ihre Gegebenheiten anpassen. Javascript-Profis werden zudem noch viele weitere Möglichkeiten finden, wie man diese Maps ausbauen kann. Aber das hat mit PS nichts mehr zu tun, hier ging es nur um das Erstellen und Modifizieren.
Und wie diese Map im Endeffekt aussieht sehen Sie hier. Gutes Gelingen.
