CMS_INPUT_IMAGEMAP

CMS_INPUT_IMAGEMAP

Mithilfe dieser Eingabekomponente können Verweise an verschiedenen Positionen eines ausgewählten Hintergrundbildes eingebunden werden. Für jeden Verweis wird dazu zuerst ein Rahmenobjekt (Rechteck, Kreis oder Vieleck) erzeugt, dessen Größe und Position anschließend individuell angepasst werden kann. Anschließend kann auf diesem Rahmenobjekt (auch "verweis-sensitive Fläche" genannt) der Verweis eingebunden werden.

Einige der aufgelisteten Parameter sind für diese Eingabekomponente nicht relevant (s.u.), da sie aktuell keinen Upload unterstützt, werden aber aus technischen Gründen trotzdem vorgehalten.

Parameter

Der nachfolgenden Tabelle können die Parameter der Eingabekomponente IMAGEMAP entnommen werden.

Übersicht

name

Das Attribut "name" ist der Variablenname einer Eingabekomponente, mit dem in den Vorlagen - mit Hilfe von $CMS_VALUE()$ - das Ergebnisobjekt der Eingabekomponente verwendet oder der Inhalt ausgegeben werden kann.

Übersicht

allowEmpty

Mit dem Parameter "allowEmpty" wird festgelegt, ob für eine Eingabekomponente ein Wert angegeben werden muss oder nicht.

Bei der Angabe von allowEmpty="YES" ist eine Eingabe nicht zwingend, bei allowEmpty="NO" jedoch schon.

Eingabekomponenten mit allowEmpty="NO" werden auch als Pflichteingabekomponenten bezeichnet.

Der Standardwert für allowEmpty ist YES.

Übersicht

hFill

Die Anzeige einer Eingabekomponente erfolgt immer mit einer vordefinierten Breite.

Ist es aber gewünscht, dass die Eingabekomponente die volle zur Verfügung stehende Anzeigebreite nutzt, ist der Parameter hFill mit dem Wert YES anzugeben.

Übersicht

hidden

Mit dem Parameter "hidden" kann eine Eingabekomponente für den Redakteur ausgeblendet werden.

Bei der Angabe von hidden="YES" wird die Eingabekomponente ausgeblendet, bei hidden="NO" nicht.

Der Standardwert für hidden ist NO, so dass Eingabekomponenten standardmäßig für den Redakteur sichtbar sind.

Übersicht

preset

Mit dem Attribut preset kann festgelegt werden, wie Vorgabewerte in einer Eingabekomponente behandelt werden (vgl. dazu auch Kapitel Vorgabewerte). Wird preset="default" gesetzt, wird der im Formular definierte Rückgriffwert verwendet. Nachträgliche Änderungen im Formular an diesem Wert wirken sich auf alle Verwendungen in den vom Redakteur gepflegten Eingabekomponenten aus, solange bis ein manueller Wert in die Eingabekomponente gesetzt wird. Dies ist die Standardeinstellung. Wird preset="copy" gesetzt, wird der durch den Redakteur gewählte Wert "hart" in der Eingabekomponente gespeichert. Nachträgliche Änderungen am Vorgabewert im Formular wirken sich nicht aus.

Übersicht

useLanguages

Mit dem Parameter useLanguages kann festgelegt werden, ob eine Eingabekomponente für verschiedene Sprachen unterschiedliche bzw. abweichende Werte speichern soll oder nicht (mehrsprachige Pflege).

Wird der Parameter nicht angegeben so werden standardmäßig abweichende Werte für die verschiedenen Sprachen gespeichert.

Bei der Angabe von NO (...useLanguages="NO") wird ein Wert für alle Sprachen gespeichert.

Übersicht

LANGINFOS

Über das Tag LANGINFOS können für jede Eingabekomponente sprachabhängige Angaben definiert werden, z. B. wie die Eingabekomponente in den unterschiedlichen Projektsprachen betitelt sein soll (Parameter label), welcher Tooltip angezeigt werden soll (Parameter description) usw. Aus Gründen der Übersichtlichkeit werden dabei Definitionen, die in mehreren Sprachen identisch sind, zusammengefasst. So wird z. B. aus

 <LANGINFOS> 
 <LANGINFO lang="*" label="Date" format="dd.MM.yy"/>
 <LANGINFO lang="DE" label="Date" format="dd.MM.yy"/>
 <LANGINFO lang="EN" label="Date" format="MM/dd/yy"/>
</LANGINFOS>

beim Speichern

 <LANGINFOS> 
 <LANGINFO lang="*" label="Date" format="dd.MM.yy"/>
 <LANGINFO lang="EN" label="Date" format="MM/dd/yy"/>
</LANGINFOS>

Die Definition für den Rückfallwert (*) bleibt dabei immer erhalten, von Definitionen für Sprachen mit gleichen Werten bleibt immer die oberste erhalten.

Ab FirstSpirit-Version 4.2R4 kann der Rückfallwert weggelassen werden. Dann wird beim Speichern automatisch die zuerst definierte Sprache als Rückfallwert verwendet, z. B. wird aus

<LANGINFOS>
 <LANGINFO lang="EN" label="Date"/>
 <LANGINFO lang="DE" label="Datum"/> 
</LANGINFOS>

beim Speichern

 <LANGINFOS> 
 <LANGINFO lang="*" label="Date"/>
 <LANGINFO lang="DE" label="Datum"/> 
</LANGINFOS>

LANGINFO

Mit dem Tag LANGINFO werden Werte oder Attribute für eine Sprache oder aber für die Verwendung als Rückfallwerte angegeben.

Um Werte bzw. Attribute für eine Sprache anzugeben ist im Parameter lang die Abkürzung der Projektsprache anzugeben:

...
<LANGINFO lang="DE".../>
...

Rückfallwerte werden mit dem speziellen Sprachkürzel * ("für alle Sprachen") angegeben:

...
<LANGINFO lang="*".../>
...

Bei dem Parameter lang handelt es sich um einen Pflichtparameter.

Übersicht

lang

Mit dem Parameter lang wird das Sprachkürzel, das in den Servereigenschaften im Feld Abkürzung eingetragen ist (siehe FirstSpirit Handbuch für Administratoren, Kapitel "Sprach-Vorlagen"), angegeben, um festzulegen für welche Projektsprachen die Definitionen gelten sollen, z.B. DE für Deutsch, EN für Englisch, FR für Französisch usw. Folgende Zeichen können dabei beliebig oft angegeben werden: -, _, 0-9 und A-Z. Kleinbuchstaben werden nach dem Speichern der Vorlage automatisch in Großbuchstaben umgewandelt. Alternativ kann * für Rückfallwerte verwendet werden.

Übersicht

description

Mit dem Parameter description kann eine Beschreibung angegeben werden, die zur Anzeige eines Tooltipps (Mouse-Over) genutzt wird.

Übersicht

label

Mit dem Parameter label wird die Oberflächenbeschriftung für Eingabe- und Visualisierungkomponenten angegeben.

Übersicht

LINKEDITORS

Mit dem Tag LINKEDITORS kann die Menge der in der Eingabekomponente verwendbaren Verweisvorlagen festgelegt werden.

Im Tag kann das Tag LINKEDITOR angegeben werden.

Eine verwendbare Verweisvorlage entspricht einem LINKEDITOR-Tag.

LINKEDITOR

Mit einem LINKEDITOR-Tag wird innerhalb des LINKEDITORS-Tags genau eine Verweisvorlage definiert, die in der Eingabekomponente verwendbar sein soll.

Das Tag besitzt den Pflichtparameter name, der den Referenznamen der Verweisvorlage enthalten muss.

Übersicht

name

Mit dem Parameter name im Tag LINKEDITOR wird der Referenzname der Verweiskonfiguration angegeben, die in der Eingabekomponente auswählbar sein soll.

Übersicht

PROJECTS

Über das Tag PROJECTS kann definiert werden, aus welchen Projekten (lokal und/oder remote) Referenzen ausgewählt werden dürfen.

Remote-Projekte werden über das Tag REMOTE angegeben, über CATEGORY kann eine oder mehrere Remote-Kategorie/n definiert werden. Das aktuelle Projekt wird über das Tag LOCAL angegeben. Es können beliebig viele Projekte definiert werden.

Zu jedem Projekt können darüber hinaus über die Tags SOURCES und FOLDER Ordner festgelegt werden, aus denen eine Referenz ausgewählt werden darf.

Die Reihenfolge der Projekt-Definitionen wirkt sich auch auf die Reihenfolge im Auswahl- und im Upload-Dialog aus (ausgenommen von dieser Sortierung ist das lokale Projekt).

Zu Einschränkungen bei der Verwendung der Remote-Media-Funktion in WebEdit siehe Seite Einschränkungen.

REMOTE

Mit diesem Tag kann ein oder mehrere Remote-Projekt/e definiert werden, das/die berücksichtigt werden soll/en. Für jedes Remote-Projekt ist ein REMOTE-Tag anzugeben.

Für die Verwendung des REMOTE-Tags ist eine gültige Lizenz für den Remote-Media-Zugriff erforderlich.

Übersicht

name

Über den Parameter name wird der symbolische Projektname des Remote-Projekts angegeben.

Übersicht

autoReleaseAfterUpload

Dieser Parameter ist für diese Eingabekomponente nicht relevant, da sie aktuell keinen Upload unterstützt.

Übersicht

uploadFolder

Dieser Parameter ist für diese Eingabekomponente nicht relevant, da sie aktuell keinen Upload unterstützt.

Übersicht

SOURCES

Mit dem Tag SOURCES ist es möglich die Auswahl oder Anzeige auf festgelegte Ordner (inkl. Unterordner) einzuschränken.

Bei SOURCES handelt es sich um eine Positivlist, d.h. es werden nur die angegebenen Ordner zugelassen.

Um einen Ordner zuzulassen ist jeweils ein FOLDER-Tag anzugeben.

FOLDER

Mit dem FOLDER-Tag wird ein Ordner angegeben, der berücksichtigt werden soll.

Bei der Angabe von FOLDER ist der Parameter name mit einem gültigen Ordnernamen der Medien-Verwaltung anzugeben.

Übersicht

name

Für den Parameter name ist ein gültiger Ordnername anzugeben. Um den gesamten Verwaltungsbereich zuzulassen, wird der Wert root verwendet:

... name="root"...

Übersicht

CATEGORY

Über CATEGORY kann eine oder mehrere Remote-Kategorie/n definiert werden. Für jede Kategorie muss ein CATEGORY-Tag angegeben werden.

Enthält eine Remote-Kategorie bereits definierte Remote-Projekte, werden diese Projekte aus der Kategorie ignoriert.

Zu jedem Projekt können darüber hinaus über die Tags SOURCES und FOLDER Ordner festgelegt werden, aus denen eine Referenz ausgewählt werden darf. Dabei werden alle Ordner aus den Projekten der über CATEGORY definierten Remote-Kategorie, die im Tag FOLDER den über name angegebenen Namen haben, berücksichtigt. Kommt der über name angegebene Ordner-Name in nur einem Projekt der Remote-Kategorie vor, wird nur der Ordner dieses Projekts im Auswahldialog angezeigt, kommt der Ordner-Name in mehreren Projekten vor, werden die Ordner aller betroffenen Projekte angezeigt.

Für die Verwendung des CATEGORY-Tags ist eine gültige Lizenz für den Remote-Media-Zugriff erforderlich.

Übersicht

name

Für den Parameter name ist ein gültiger Name einer Remote-Kategorie anzugeben.

Werden zwei oder mehr REMOTE- oder CATEGORY-Tags mit gleichem Namen definiert, so wird immer nur die erste Definition beachtet.

Übersicht

SOURCES

Mit dem Tag SOURCES ist es möglich die Auswahl oder Anzeige auf festgelegte Ordner (inkl. Unterordner) einzuschränken.

Bei SOURCES handelt es sich um eine Positivlist, d.h. es werden nur die angegebenen Ordner zugelassen.

Um einen Ordner zuzulassen ist jeweils ein FOLDER-Tag anzugeben.

FOLDER

Mit dem FOLDER-Tag wird ein Ordner angegeben der berücksichtigt werden soll.

Bei der Angabe von FOLDER ist der Parameter name mit einem gültigen Ordnernamen sowie der Parameter store mit dem gültigen Namen des zugehörigen Verwaltungsbereichs anzugeben.

Übersicht

name

Für den Parameter name ist ein gültiger Ordnername anzugeben. Um den gesamten Verwaltungsbereich zuzulassen, wird der Wert root verwendet:

... name="root"...

Übersicht

store

Für den Parameter store ist der Name des Verwaltungsbereichs anzugeben. In diesem Fall ist nur die Medien-Verwaltung möglich:

...store="mediastore"...

Übersicht

LOCAL

Mit diesem Tag muss bei Angabe des Tags PROJECTS das lokale Projekt definiert werden.

Übersicht

name

Über den Parameter name ist der Name des lokalen Projekts anzugeben. Dies geschieht standardmäßig mit einem . (Punkt):

<LOCAL name=".">

Übersicht

uploadFolder

Dieser Parameter ist für diese Eingabekomponente nicht relevant, da sie aktuell keinen Upload unterstützt.

Übersicht

SOURCES

Mit dem Tag SOURCES ist es möglich die Auswahl oder Anzeige auf festgelegte Ordner (inkl. Unterordner) einzuschränken.

Bei SOURCES handelt es sich um eine Positivlist, d.h. es werden nur die angegebenen Ordner zugelassen.

Um einen Ordner zuzulassen ist jeweils ein FOLDER-Tag anzugeben.

FOLDER

Mit dem FOLDER-Tag wird ein Ordner angegeben, der berücksichtigt werden soll.

Bei der Angabe von FOLDER ist der Parameter name mit einem gültigen Ordnernamen der Medien-Verwaltung anzugeben.

Übersicht

name

Für den Parameter name ist ein gültiger Ordnername anzugeben. Um den gesamten Verwaltungsbereich zuzulassen, wird der Wert root verwendet:

... name="root"...

Übersicht

LanguageAbbreviation	Sprachkürzel, z.B. DE, EN, FR oder * für Rückfallwerte
YesNo	Schalter, um ein Attribut anzuwenden oder nicht NO Attribut nicht anwenden YES Attribut anwenden
String	Eine beliebige Zeichenkette
Preset	Define the general preset modes. Default Retrieve default from definition, if no value is set. Copy Copy default from definition and save automatically.
Designator	Eindeutiger Bezeichner variabler Länge; muss mit einem Buchstaben oder Unterstrich beginnen und darf nur die Zeichen "A-Z", "a-z", "0-9" und "_" enthalten, z.B. "fr_st_varName"

Beispiel

Ein Beispiel für die Eingabekomponente „CMS_INPUT_IMAGEMAP“:

<CMS_INPUT_IMAGEMAP useLanguages="NO" hFill="YES" name="BEZEICHNER">
  <LANGINFOS>
    <LANGINFO lang="*" label="TEXT" description="TEXT"/>
    <LANGINFO lang="DE" label="TEXT" description="TEXT"/>
    <LANGINFO lang="EN" label="TEXT" description="TEXT"/>
  </LANGINFOS>
</CMS_INPUT_IMAGEMAP>

Verwendungsbeispiel in der Vorlagensyntax

Die Werte, die ein Redakteur in der Eingabekomponente CMS_INPUT_IMAGEMAP in der Inhalte-Verwaltung pflegt, können später auf verschiedene Weise ausgegeben werden.

Eine verweis-sensitive Grafik („Imagemap“) wird üblicherweise mithilfe der HTML-Tags img, area und map ausgegeben. Der Quelltext einer Imagemap sieht beispielsweise so aus:

<img src="..." alt="Alternativtext_Bild" usemap="#MAPNAME">
<map name="MAPNAME">
    <area shape="rect" coords="11,10,59,29"
             href="http://www.google.de/" alt="Alternativtext_Verweis" title="Titletext_Verweis">
</map>

In der ersten Zeile wird über das img-Tag ein Bild angezeigt.

Mithilfe des map-Tags können Teilbereiche des Bildes verweis-sensitiv gemacht werden. Durch das Attribut name wird der Name für die Definition festgelegt. In einer Grafik (img-Tag) kann dann über das Attribut usemap auf die Definition zurückgegriffen werden.

Für standard-konformes XHTML müssen alleinstehende Tags wie area und image als inhaltsleer gekennzeichnet werden, also z. B. <area ... /> und <image ... />.

Mit dem Attribut shape wird die Form der verweis-sensitiven Fläche bestimmt, die Koordinaten der Flächen werden über das Attribut coords angegeben. Dabei handelt es sich um absolute Pixelangaben, die durch Kommata getrennt werden. Pixelangaben von x-Koordinaten werden vom linken Rand des Bildes gemessen, y-Koordinaten geben den Abstand zum oberen Rand des Bildes an.

• rect: Für viereckige Flächen müssen die x- und y-Koordinaten der linken oberen und der rechten unteren Ecke paarweise angegeben werden, z. B. shape="rect" coords="11,10,59,29"
  - x-Koordinate der linken oberen Ecke: 11
  - y-Koordinate der linken oberen Ecke: 10
  - x-Koordinate der rechten unteren Ecke: 59
  - y-Koordinate der rechten unteren Ecke: 29
• circle: Für Kreise müssen die Koordinaten des Mittelpunkts paarweise sowie der Radius angegeben werden, z. B. shape="circle" coords="86,242,50"
  - x-Koordinate des Mittelpunkts: 86
  - y-Koordinate des Mittelpunkts: 242
  - Radius: 50
• poly: Für Vielecke werden die Koordinaten jeder einzelnen Ecke paarweise angegeben, z. B. shape="poly" coords="131,139,268,435,183,77,177,51"
  - x-Koordinate des ersten Punkts: 131
  - y-Koordinate des ersten Punkts: 139
  - x-Koordinate des zweiten Punkts: 268
  - y-Koordinate des zweiten Punkts: 435 usw.
  - für jeden Punkt des Vielecks also eine horizontale und eine vertikale Angabe.

Ausgabe der Elemente einer Imagemap

Die verweis-sensitiven Flächen einer CMS_INPUT_IMAGEMAP-Eingabekomponente werden über die Methode areas ausgegeben. Da innerhalb einer CMS_INPUT_IMAGEMAP-Eingabekomponente mehrere verweis-sensitive Flächen gepflegt sein können, wird die Anweisung $CMS_FOR(...)$ verwendet, um die Attribute jeder einzelnen Fläche ausgeben zu können:

$CMS_FOR(FLAECHE, st_imagemap.areas)

Auf der Variablen FLAECHE können verschiedene Methoden angewendet werden. Die allgemeine Syntax dazu lautet:

$CMS_VALUE(FLAECHE.METHODE)$

Für die Verwendung innerhalb eines Projekts muss der Variablenname FLAECHE entsprechend angepasst werden!

Allgemeine Methoden

Spezielle Methoden

Die Werte für die x- bzw. y-Koordinate können auch einzeln abgefragt werden.

Die entsprechende Syntax für Rechtecke lautet dazu:

• für die x-Koordinate des linken oberen Punkts: $CMS_VALUE(FLAECHE.leftTop.x)
• für die y-Koordinate des linken oberen Punkts: $CMS_VALUE(FLAECHE.leftTop.y)
• für die x-Koordinate des rechten unteren Punkts: $CMS_VALUE(FLAECHE.rightBottom.x)
• für die y-Koordinate des rechten unteren Punkts: $CMS_VALUE(FLAECHE.rightBottom.y)

Die Koordinaten des Mittelpunkts eines Kreises wird folgendermaßen ausgegeben:

• für die x-Koordinate des Mittelpunkts: $CMS_VALUE(FLAECHE.center.x)$
• für die y-Koordinate des Mittelpunkts: $CMS_VALUE(FLAECHE.center.y)$

Da ein Vieleck aus mehreren Ecken bestehen kann, muss die $CMS_FOR(...)$-Anweisung verwendet werden, um die x- und y-Koordinaten aller Ecken auszugeben:

$CMS_FOR(point, FLAECHE.points)$
         x: $CMS_VALUE(point.x)$, y: $CMS_VALUE(point.y)$
 $CMS_END_FOR$

Ausgabe über Verweisvorlagen

Eine weitere Möglichkeit, die Verweise einer verweis-sensitiven Fläche auszugeben, ist über die Anweisung $CMS_VALUE(FLAECHE.link)$. In diesem Fall wird auf den Ausgabekanal der Verweisvorlage (siehe Kapitel Verweisvorlagen) zurückgegriffen.

Beispiel-Code HTML-Kanal (Seiten- oder Absatzvorlage, über die die Imagemap ausgegeben werden soll):

<map name="MAPNAME">
    $CMS_FOR(FLAECHE, st_imagemap.areas)$
        $CMS_VALUE(FLAECHE.link)$
    $CMS_END_FOR$
</map>

Im Ausgabekanal der Verweisvorlage werden die Informationen der in der Inhalte-Verwaltung gepflegten Imagemap folgendermaßen ausgegeben:

<area 
    shape="$CMS_VALUE(FLAECHE.shape)$" 
    coords="$CMS_VALUE(FLAECHE.coordinates)$" 
    alt="$CMS_VALUE(lt_text)$"  
    title="$CMS_VALUE(lt_text)$" 
    href="$CMS_REF(lt_reference)$" />

wobei lt_text und lt_reference die Variablen für den Verweistext bzw. das Verweisziel der gewählten Verweisvorlage sind.

Auf die Variable FLAECHE kann hier nur zugegriffen werden, da sie sich im inneren Auswertungskontext der FOR-Schleife befindet. Um zu prüfen, ob in der Seiten- oder Absatzvorlage, über die die Imagemap ausgegeben werden soll, die Variable FLAECHE überhaupt definiert ist, kann ein $CMS_IF(!FLAECHE.isNull)$ ergänzt werden.

Automatische Ausgabe über die Methode areasAsHtml

Die Methode areasAsHtml ist eine vereinfache Möglichkeit, eine (X)HTML-konforme Imagemap automatisch auszugeben.

Diese Methode wird allerdings nicht empfohlen.

Beispiel-Code HTML-Kanal:

<map name="MAPNAME">
   $CMS_VALUE(st_imagemap.areasAsHtml)$
</map>

Diese Methode gibt alle in der Eingabekomponente gepflegten Flächen inklusive der folgenden Attribute aus:

• shape: Form der verweis-sensitiven Flächen
• coords: Koordinaten der verweis-sensitiven Flächen
• alt bzw. title: Text, der im Feld "text" des Verweises für die verweis-sensitiven Fläche eingetragen ist
• href: Verweisziel, das für die verweis-sensitiven Fläche gewählt wurde

Beispiel:

<map name="MAPNAME">
<area shape="RECT" coords="20,18,120,118" alt="Verweis-Text" title="Verweis-Text" href="http://www.bild.de"/><area shape="CIRCLE" coords="86,242,50" alt="Heise" title="Heise" href="http://www.heise.de"/><area shape="POLY" coords="131,139,401,77,303,45,177,51" alt="Chip" title="Chip" href="http://www.chip.de"/>
</map>

Diese Ausgabe kann nicht weiterverarbeitet werden.