Image Maps sind in add.min® kein Problem, man muss nur etwas HTML einsetzen

Der Aufbau einer Image Map in add.min unterscheidet sich denn auch nur in der Linksetzung von einer herkömmlichen Image Map.

Add.min selbst stellt keine Komponente für das Erstellen einer Imagemap zur Verfügung.

Daher muss die Imagmap mit einem beliebigen externen HTML-Editor erstellt und der HTML-Code dieser Imagemap mit der Komponente "HTML-Include" eingebunden werden.

Damit das Bild der Imagemap aus der add.min Datenbank generiert wird und die Verlinkung der einzelnen Hotspots funktioniert, ist es notwendig, kleine Anpassungen am HTML-Code vorzunehmen.

Im Beispiel wird eine Imagemap mit Frontpage erstellt und für add.min angepasst.

Wir gehen davon aus, dass bekannt ist, wie eine Imagemap in HTML erstellt wird.

1. Imagemap erstellen.

Dazu wird Frontpage gestartet. Dort wird eine neue Seite erstellt und ein Bild eingebunden.

Dieses Bild soll in den Kästen "1" und "2" jeweils auf eine bestimmte add-min-Seite verlinken.

Wir machen es uns beim Erstellen einfach und geben als "Dummy-Link" zunächst einmal relative Links "link1.htm" und "link2.htm" an.

Der Code für die Imagemap sieht jetzt so aus, wie unten angegeben. Der "img src" für das Bild ist noch lokal und die Verlinkung zeigt die beiden Dummy-Links an.

<p><map name="Testmap">

<area href="link1.htm" shape="rect" coords="1, 1, 99, 99">

<area href="link2.htm" shape="rect" coords="102, 2, 198, 98">

 </map>

 <img border="0" src="file:///C:/beispielimage.jpg" width="200" height="100" usemap="#Testmap">

2. Bild in die Datenbank laden und ID ermitteln

Zunächst muss unser Beispielimage in die Datenbank geladen werden. Gehen Sie auf die Seite, die eine Imagemap enthalten soll und laden Sie das Bild der Imagemap ganz normal mit der Komponente "Bild" per Bildupload in die Datenbank. Dieses Bild erhält dann eine ID.

Die ID erhält man nach dem Hochladen des Bildes in der Komponente "Bild", wenn man mit der rechten Maustaste auf das Vorschaubild klickt und "Properties" oder "Eigenschaften" wählt. Die Dialogbox, die jetzt erscheint, zeigt ganz oben den internen add.min "Bildnamen". Die ID des Bildes ist unten mit roten Linien hervorgehoben:

Die Komponente Bild brauchen wir jetzt nicht mehr an dieser Stelle, da wir sie nur benötigten, um ein Bild hochzuladen und dessen ID zu ermitteln. Daher können wir sie wieder löschen. Alternativ wäre es auch möglich gewesen, ein Bild über die "Dateiverwaltung" in die Datenbank zu laden.

3. add.min Routine für Bildausgabe mit richtiger Bild-ID einsetzen

Jetzt müssen wir dafür sorgen, dass das Bild aus der Datenbank für die Imagmap benutzt wird und nicht die lokale Datei "Beispielimage.jpg"

Für die Bildausgabe benutzt add-min die Datei "showimg.aspx" (mit Pfad) gefolgt von einem Parameter, der die Bild-ID angibt.

z.B.:     "/bausteine.net/img/showimg.aspx?biid=8098"

Wir müssen jetzt also an Stelle des lokalen "img src" die add.min-Routine sowie die Bild-ID des hochgeladenen Bildes einsetzen.

Dazu ändern wir in unserem HTML-Code für die Imagemap die Sequenz:

img border="0" src="file:///C:/beispielimage.jpg"

wie folgt:

img border="0" src="/bausteine.net/img/showimg.aspx?biid=8098"

4. Einbinden des HTML-Codes

Unser Code sieht jetzt so aus

<p><map name="Testmap">

<area href="link1.htm" shape="rect" coords="1, 1, 99, 99">

<area href="link2.htm" shape="rect" coords="102, 2, 198, 98"></map>

<img border="0" src="/bausteine.net/img/showimg.aspx?biid=8098" width="200" height="100" usemap="#Testmap"></p>

Wichtig: Bei der Definition der Map darf der Map name kein führendes #-Zeichen enthalten, bei der Referenz mit usemap muss er mit #-Zeichen referenziert werden.

Zum Einbinden der Imagemap auf der Seite verwenden wir die Komponente "HTML Include" und kopieren den HTML-Code der Map in das Editorfeld dieser Komponente.

Jetzt stimmt schon fast alles bis auf die Anpassung der Links, die leider noch ins Leere führen.

Das vorläufige Ergebnis sehen wir hier:

5. Linkanpassung

Die Links, auf die die Hotspots zeigen sollen, ermitteln wir am Besten im Liveweb, auf schon publizierte Seiten, da sich die Live-URL etwas von der Redaktions-URL unterscheidet.

Man kann absolute oder relative Links verwenden.

Da wir in dieser Demo kein Liveweb angelegt haben, folgt hier ein Beispiel mit absoluter Verlinkung:

Wollen wir z.B. auf folgende Seite verlinken:

http://www.derbiobaecker.de/docs/index.aspx?id=33635&domid=1075

dann müssen wir genau diesen Link im href code des jeweiligen Hotspots einfügen.

Oder die Kurzform:

http://www.derbiobaecker.de/docs/index_pagex_33635

Hier wird aus der Sequenz: index.aspx?id=33635

die Kurzform: index_pagex_33635

Hier folgt nun unsere Imagemap mit absoluter Verlinkung auf die obige Seite im neuen Fenster und auf die Startseite von Spiegel-Online: