Antworten zu häufig gestellten Homepage-Fragen
 Alle Anleitungen
Einige Anleitungen
Intern
Kostenl. Partnerlinks
[,__,] Druckversion

Die Website Homepage-FAQs.de befindet sich im Archivmodus.
FAQS zu HP&Co.
Imagemaps / Hotspots / CSS image maps - Bereiche auf einer Grafik als anklickbare Links / Mouseovereffekte

Inhalte:

- CSS image maps

- Normale Imagemaps

- Infos zu Imagemap (bei Selfhtml)

- Anleitungen für...

- Photoimpact 5
- Picture Publisher 8
- GIMP

- Imagemap-Programm für Mac

- Programm "Fast Image-Map 2 zum einfachen Erzeugen des Codes

- Kleine Anleitung zu Fast Image-Map 2

CSS image maps


Normale Imagemaps

Zitat:

Erläuterung:

Mit <map name="mapname"> leiten Sie die Definition der verweis-sensitiven Flächen einer Grafik ein.
...
Vergeben Sie keine zu langen Namen. Namen dürfen keine Leerzeichen und keine deutschen Umlaute enthalten. Das erste Zeichen muss ein Buchstabe sein. Danach sind auch Ziffern erlaubt. Benutzen Sie als Sonderzeichen im Namen höchstens den Unterstrich (_), den Bindestrich (-), den Doppelpunkt (:) oder den Punkt (.).

Anmerkung: Erläuterung extra hinzugefügt und den Teil "keine Leerzeichen" rot markiert, da bei der Forenhilfe das "hartnäckige" Problem mit Leerzeichen bei name="mapname" und usemap="#mapname" (sowie auch bei Bild-Dateiname) aufgetaucht ist.

Anleitungen für Photoimpact und Picture Publisher und GIMP



Imagemap-Programm für Mac

MapSpinner > http://www.optima-system.com/mapspinner/index.php

MapDesign > http://www.ragesw.com/products/mapdesign.html

YokMap > http://www.yoksoftware.com/products/

Anmerkung: Selber habe ich keinen Mac und kann die Programme daher nicht bewerten, aber auf einer Downloadseite hatten sie die max. Sternenzahl.


Programm "Fast Image-Map 2" zum einfachen Erzeugen des Codes

Und wer kein Grafikprogramm nehmen will, für den gibt es hier ein kostenloses Tool

http://www.cl-soft.de/fim_indx.htm (Fast-Imagemap 2)

Auszug aus der Beschreibung zu Fast-Imagemap 2

Features:
· einfaches Erstellen der Verweisflächen mit der Maus
· übersichtliche Bedienoberfläche
· Erstellung XHTML konformer Image Maps
· Vorschaufunktion
· Zoomfunktion
· Importieren von beliebigen Image Maps zur Weiter-/Nachbearbeitung

Kleine Anleitung zu Fast Image-Map 2


1) Nach dem Start das "weisse Blatt" anklicken, im Fenster Name und Beschreibungstext eingeben, dann auf [...] klicken und ein Bild auswählen.

2) Nun die Art auswählen, hierzu oben auf Rechteck, Kreis oder Polygon klicken

3) Bereiche festlegen

a) Mit der linken Maustaste einen Punkt anklicken und Rechteck bzw. Kreis auf die gewünschte Grösse ziehen, Maustaste loslassen

b) Für ein Polygon nacheinander die Punkte mit der linken Maustaste anklicken. Um das Polygon zu schliessen mit der rechten Maustaste einfach irgendwohin klicken

4) In der Übersicht die Zeilen mit den Koordinaten in den Klammern anklicken, dann stehen unten die Reiter für Eingaben zur Verfügung. Wichtig ist der Reiter "Zieladresse" da hier die Linkadresse angegeben wird, bei externen Links immer mit http://... beginnen. Die anderen Reiter leer lassen oder bei Bedarf füllen bzw. bearbeiten

5) Nun auf das "Blatt mit Lupe" oben klicken, es öffnet sich das Vorschaufenster, hier gibt es den Quelltext zum Kopieren und die Vorschau im Browser um zu sehen, ob alles stimmt. Auf "Fenster schliessen" klicken, um im Programm weiterzumachen oder es zu beenden

Siehe auch


Anleitung (C) 2005 - 2011 Daniel Wurst - http://www.homepage-faqs.de