ImageMap

      • Keine Statusinformation
Version vom 6. Dezember 2016, 09:22 Uhr von Schnaks (Diskussion)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)



Sie können ein Bild mit mehreren Links versehen. Weisen Sie einfach unterschiedlichen Bildbereichen verschiedene Links zu. Mit der Erweiterung Imagemap können Sie ein eingebundenes Bild in Segmente einteilen und diesen Segmenten Links zuweisen.

Verwendung[Bearbeiten | Quelltext bearbeiten]

Imagemaps sind beispielsweise sehr hilfreich, wenn man in einem Prozessdiagramm die einzelnen Schritte zur Vertiefung verlinken möchte. Aber auch eine als Bild eingebundene Agenda im Wiki kann so mit Hyperlinks zu den einzelnen Kapiteln versehen werden.

Generelle Funktionsweise von ImageMapEdit[Bearbeiten | Quelltext bearbeiten]

ImageMapEdit ist lediglich ein Werkzeug, das einen Code generiert. Dieser Code wird dann kopiert und händisch auf den jeweiligen Artikeln eingebunden. Der Zugang zu diesem Werkzeug befindet sich auf der Metaseite der Datei.

Eine ImageMap erstellen[Bearbeiten | Quelltext bearbeiten]

Suchen Sie zuerst das gewünschte Bild und rufen Sie es auf, indem Sie auf ds Bild klicken. Sie werden automatisch zur Metaseite der Datei weitergeleitet. Das Bild liegt im Namensraum "File" (Synonym gelten dafür auch Media, Datei, Image, Bild). Sie können das Bild also auch direkt über die URL aufrufen, indem sie den Dateinamen eingeben und auf Enter klicken z.B.

http://wiki.company.de/index.php/Datei:WikiData_Model.png

Sie werden auf die Dateiseite des Bildes weitergeleitet. Unterhalb des Bildes werden Metadaten aufgeführt, und dort finden Sie auch den Zugang zu "ImageMapEdit":

Screenshot: Unterhalb des Bildes befindet sich der Zugang zu ImageMapEdit

Klicken Sie auf den Button "ImageMapEdit>" unter dem Bild, um das "ImageMap"-Tool zu öffnen.

Folgender Dialog erscheint:

Screenshot:Ein Bild als ImageMap bearbeiten
  1. Wählen Sie bei "Neuen Bereich erstellen" welche Form ihre Auswahl haben soll.
    1. Rechteck: Klicken Sie anschließend mit der linken Maustaste dort in das Bild, wo die Auswahl beginnen soll und danach mit der rechten Maustaste an die Stelle, an der die Auswahl enden soll. Ihr ausgewählter Bereich erscheint rot hinterlegt.
    2. Kreis: Klicken Sie auf das Bild und um die Maus als Mittepunkt wird ein kreisförmiger Bereich markiert. Möchten Sie den Bereich vergrößern, geben Sie einen größeren Radius ein.
    3. Benutzerdefiniert (Polygon): Über mehrere Klicks mit der linken Maustaste können Sie eine beliebige Form markieren.
  2. Geben Sie nun nachdem Sie den ersten bereich markiert haben für diesen im Feld "Linkziel" den Artikeltitel ein, zu dem der angelegte Bereich führen soll. Optional können Sie auch noch einen Linktitel vergeben.
  3. Wiederholen Sie die Schritte 1-3, um weitere Bereiche auszuwählen.
  4. Zum Schluss kopieren Sie den Code aus dem Feld "Erstellter Wikicode" und fügen ihn in Ihren Artikel in der Wiki-Code-Ansicht ein.
Icon-note.png
Hinweis

Sobald Sie die Metaseite des Bildes verlassen, wird der generierte Code gelöscht. Möchten Sie den Code noch einmal verwenden empfiehlt es sich, einen Artikel aufrufen, auf dem Sie den Code verwendet haben und diesen zu kopieren.


Wikicode[Bearbeiten | Quelltext bearbeiten]

So sieht das Ganze dann im Wikicode aus:

Beispiel:
<imagemap>
Image:Schnelleinstieg.png|center|Schnelleinstieg

rect 145 76 356 98 [[Verkaufs-Prozesse|Verkaufs-Prozesse]]
rect 140 173 355 194 [[Unterstützungs-Prozesse|Unterstützungs-Prozesse]]

desc none
</imagemap>


Bitte beachten Sie: Wenn Sie auf eine externe Seite verlinken wollen, müsse Sie den Wiki-Code händisch anpassen.

Beispiel: Ersetzen Sie [[Verkaufs-Prozesse|Verkaufs-Prozesse]] durch [http://www.bluespice.com], um auf eine externe Homepage zu verlinken.

Links[Bearbeiten | Quelltext bearbeiten]

Videotutorial[Bearbeiten | Quelltext bearbeiten]

Das Video zeigt die Funktion in der Umgebung BlueSpice 1.20.x. ImageMapEdit hat aber dieselbe Funktionsweise in den darauffolgenden BlueSpice Versionen.

<iframe src="//www.youtube.com/embed/aiek1wo4s3o?" width="300" height="169" frameborder="0" allowfullscreen="true"></iframe>

Anhänge

Diskussionen