Image Map
Cursorsensitives Bild
Verweis-Sensitive Grafik
WebhilfeEine Image Map, ein cursorsensitives Bild bzw. eine verweissensitive Grafik, also ein Bild, auf dem bestimmte Bereiche mit einem Link hinterlegt sind, kann nur als 'Reines HTML' aus 'Spezielle Elemente' erstellt werden*).
Voraussetzungen
Ein Bild
- im jpg-, gif- oder png-Format
- auf dem die zu verlinkenden (sensitiven) Bereiche klar umrissen sind
- auf dem sich die zu verlinkenden Bereiche nicht überschneiden
- für das die x-y-Koordinaten der Bereiche (alle Angaben in "Pixel" ) bekannt sind
(zur Ermitteln der X-/Y-Koordinaten über Photoshop).
Zunächst sollte festgelegt werden, welche Form die zu verlinkende Fläche auf dem Bild hat:
| Rechteck | Für die Bestimmung eines Rechtecks (shape="rect") - genügen zwei x-/y-Koordinaten-Paare: den Eckpunkt links oben (x1,y1) und den Eckpunkt rechts unten (x2,y2) → coords="x1,y1,x2,y2" |
| Kreis | Für die Bestimmung eines Kreises (shape="circle") - wird das x-/y-Koordinaten-Paar des Kreis-Mittelpunktes (x,y) - und dessen Radius (r) benötigt: → coords="x,y,r" |
| Vieleck / Polygon | Für die Bestimmung eines Vielecks / eines Polygons (shape="poly") - werden n mal x-/y-Koordinaten-Paare benötigt also pro Richtungswechselpunkt ein x-/y-Koordinaten-Paar → coords="x1,y1,x2,y2, ... xn,yn" |
Beispiel
Aufgabe
Ein Logo (logo.jpg) soll cursorsensitiv dargestellt, d.h. als Image Map aufbereitet werden.
Es enthält folgende zu verlinkende Elemente:
- den "Firmennamen" (Form = Rechteck, rect) → Max Mustermann
- ein "Siegel" (Form = Kreis, circle) → das Siegel der Dachdecker-Innung
- ein "Gebäuderelief" (Form = Polygon, poly) → Symbol des Einsatzortes
Vorgehensweise
Das entsprechende Bild wir in der gewünschten Größe in der Dateiliste (Objektbibliothek) abgelegt.
Der Sourcecode muß, analog dem unten stehenden Beispiel, aufgebaut werden.
Im img-Tag wird über das Attribut usemap="#Map" die Verbindung zur Map herstellt, in der das Bild und seine sensitiven Flächen näher beschrieben sind.
Der Sourcecode für das Bild sieht in etwa folgendermaßen aus:
<img
alt="Logo (Dachdecker)"
title="Logo (Dachdecker)"
height="105"
width="240"
usemap="#Map"
border="0"
src="/fileadmin/mediapool/10_andere/webhilfe/bilder/logo_dd_gross.gif" />
Im Tag 'map' wird über das Attribut 'name' die Verknüpfung zum Bild (im img-Tag über das Attribut 'usemap="#Map"', s.o.) hergestellt.
Im 'map'-Tag sind die sensitiven Bereiche im Bild über den/die Tag/s 'area' eingebunden.
Der area-Tag hat folgende Attribute:
- 'shape', beschreibt die Form (rect, circle oder poly)
- 'coords', benennt die Koordinaten
- 'href', verknüpft mit der gewünschten Link-Adresse (URL), absolut oder relativ
- 'alt' und 'title', beinhalten die verbale Bildbeschreibung
Der Sourcecode für die Beschreibung der sensitiven Felder sieht in etwa folgendermaßen aus:
<map
name="Map">
<area
alt="Name (rect): Max Mustermann"
title="Name (rect): Max Mustermann"
shape="rect"
coords="87,69,239,95"
href="/webhilfe/imagemap/beispiel/name.html" />
<area
alt="Siegel (circle): Dachdecker"
title="Siegel (circle): Dachdecker"
shape="circle"
coords="203,33,33"
href="/webhilfe/imagemap/beispiel/siegel.html" />
<area
alt="Form (poly): Gebäude / Dach"
title="Form (poly): Gebäude / Dach"
shape="poly"
coords="0,103,54,103,106,53,123,69,139,69,146,59,100,13,61,13,0,71"
href="/webhilfe/imagemap/beispiel/gebaeude.html" />
</map>
So sieht's aus
... und hier ist das Beispiel umgesetzt
*) nur mit Admin-Rechten möglich → Team Internetpräsentation
Ansprechpartner für die Internetseite
Martin Ginter
Telefon 0761 270-22630
martin.ginter@uniklinik-freiburg.de
Martin Reinbold
Telefon 0761 270-22870
martin.reinbold@uniklinik-freiburg.de