Prozesslandschaft mit Image Map

Einleitung

In Ihrer QM-Pilot Umgebung können Sie unter Konfiguration -> Einstellungen -> Logos unter "Benutzerdefinierte Prozesslandschaft einfügen" eine eigene Übersichtsseite unter "Prozesse ansehen" anzeigen lassen. Dazu können Sie mit dem Knopf "Select files..." das gewünschte Bild in Ihre QM-Pilot Umgebung laden.

Um die Prozesslandschaft nun anzuzeigen, muss der Haken bei "Benutzerdefinierte Prozesslandschaft auf oberster Ebene anzeigen" gesetzt werden.

Mit dem Feld "Code benutzerdefinierte Prozesslandschaft" können Sie Bereiche auf Ihrem hochgeladenen Bild definieren bei denen mit einem Klick z.B. zu einem Prozess navigiert wird oder eine neue Seite geöffnet wird. Dies geschieht mit einem sogenannten Image Map. 

Hier eine kurze Einführung im Umgang mit Image Maps im Bezug auf die Prozesslandschaft in Ihrer QM-Pilot Umgebung:

 

Aufbau

Eine Image-Map beginnt immer mit folgendem Code:

<map name="image-map">

und endet mit:

</map>

 

Dazwischen werden ein oder mehrere Bereiche als Formen (Rechteck, Polygon oder Kreis) definiert:

Rechteck

Beispiele:

<area alt="Rechteck" title="Rechteck" href="https://de.wikipedia.org/wiki/Rechteck" target="_blank" coords="0,0,82,126" shape="rect">

oder

<area alt="Rechteck" title="Rechteck" ng-click="onChangeTree(528)" coords="0,0,82,126" shape="rect">

Die "<" zeigen den Begin und ">" das Ende eines Bereichs an. Jeder Bereich besitzt folgende Eigenschaften:

Eigenschaft

Beschreibung

target

Ob bei einem Klick auf den Bereich der Link im gleichen Fenster ("_self") oder in einem neuen Fenster ("_blank") geöffnet werden soll.

alt

Welcher Text angezeigt werden soll wenn man mit der Maus über den Bereich fährt.

title

Welcher Text angezeigt werden soll wenn man mit der Maus über den Bereich fährt.

href

Auf welche Seite navigiert werden soll sobald der Bereich angeklickt wird.

ng-click

Auf welchen Prozess/Dokument/Risiko navigiert werden soll sobald der Bereich angeklickt wird. Wird nur benötigt, wenn zu einem Prozess in der aktuellen QM-Pilot Umgebung navigiert werden soll, wobei 528 für die treeId steht (welche man am Ende des Links erkennt welchen man sieht, wenn man einen Prozess öffnet).

coords

Die Koordinaten (in Pixel) der Ecken des Rechteck-Bereichs in der Reihenfolge: Links, Oben, Rechts, Unten

shape

Der Typ des Bereichs (hier "rect" für Rechteck)

  

Polygon

Beispiel:

<area alt="Polygon" title="Polygon" href="https://de.wikipedia.org/wiki/Polygon" target="_blank" coords="117,203,205,204,208,240,163,256,116,240" shape="poly">

oder

<area alt="Polygon" title="Polygon" ng-click="onChangeTree(528)" coords="117,203,205,204,208,240,163,256,116,240" shape="poly">

Die "<" zeigen den Begin und ">" das Ende eines Bereichs an. Jeder Bereich besitzt folgende Eigenschaften:

Eigenschaft

Beschreibung

target

Ob bei einem Klick auf den Bereich der Link im gleichen Fenster ("_self") oder in einem neuen Fenster ("_blank") geöffnet werden soll.

alt

Welcher Text angezeigt werden soll wenn man mit der Maus über den Bereich fährt.

title

Welcher Text angezeigt werden soll wenn man mit der Maus über den Bereich fährt.

href

Auf welche Seite navigiert werden soll sobald der Bereich angeklickt wird.

ng-click

Auf welchen Prozess/Dokument/Risiko navigiert werden soll sobald der Bereich angeklickt wird. Wird nur benötigt, wenn zu einem Prozess in der aktuellen QM-Pilot Umgebung navigiert werden soll, wobei 528 für die treeId steht (welche man am Ende des Links erkennt welchen man sieht, wenn man einen Prozess öffnet).

coords

Die Koordinaten (in Pixel) der Ecken des Polygon-Bereichs. Jeder Punkt wird jeweils in der Reihenfolge Links, Oben angegeben. Falls sich Anfangs-Punkt und End-Punkt des Polygons nicht decken, werden diese automatisch am Ende verbunden.

shape

Der Typ des Bereichs (hier "poly" für Polygon)

 

Kreis

Beispiel:

<area alt="Kreis" title="Kreis" href=" https://de.wikipedia.org/wiki/Kreis" target="_blank" coords="90,58,3" shape="circle">

oder

<area alt="Kreis" title="Kreis" ng-click="onChangeTree(528)" coords="90,58,3" shape="circle">

Die "<" zeigen den Begin und ">" das Ende eines Bereichs an. Jeder Bereich besitzt folgende Eigenschaften:

Eigenschaft

Beschreibung

target

Ob bei einem Klick auf den Bereich der Link im gleichen Fenster ("_self") oder in einem neuen Fenster ("_blank") geöffnet werden soll.

alt

Welcher Text angezeigt werden soll wenn man mit der Maus über den Bereich fährt.

title

Welcher Text angezeigt werden soll wenn man mit der Maus über den Bereich fährt.

href

Auf welche Seite navigiert werden soll sobald der Bereich angeklickt wird.

ng-click

Auf welchen Prozess/Dokument/Risiko navigiert werden soll sobald der Bereich angeklickt wird. Wird nur benötigt, wenn zu einem Prozess in der aktuellen QM-Pilot Umgebung navigiert werden soll, wobei 528 für die treeId steht (welche man am Ende des Links erkennt welchen man sieht, wenn man einen Prozess öffnet).

coords

Die Koordinaten (in Pixel) des Zentrums des Kreis-Bereichs sowie den Radius in der Reihenfolge: Links, Oben, Radius

shape

Der Typ des Bereichs (hier " circle" für Kreis)

 

Im Internet finden sich auch Tools mit denen sich Image Maps generieren lassen. Ein einfaches Tool finden Sie unter https://www.image-map.net

Beachten Sie hierbei, dass jeweils nur den Code von <map... bis </map> benötigen und dass Sie das selbe Bild verwenden, welches Sie im QM-Pilot hochladen. Ausserdem muss bei den Tools im Internet das Attribut ng-click="onChangeTree(...)" selber gesetzt werden falls auf ein Prozess/Dokument/Risiko innerhalb der QM-Pilot Umgebung navigiert werden soll.

War dieser Beitrag hilfreich?
0 von 0 fanden dies hilfreich
Haben Sie Fragen? Anfrage einreichen

Kommentare

0 Kommentare

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.