Joomla Tutorials

Folge uns auf Twitter

Folge uns auf Twitter

Es lohnt sich, Ahadesign aufTwitterzu folgen, um keine Neuigkeiten zu Bildbearbeitung, Webdesign Tutorials, Reviews, Testberichte, News, Downloads und Verlosungen zu verpassen. Wer Twitter nicht mag oder eine zusätzliche Möglichkeit sucht, um immer auf dem neuesten Stand zu sein, kann auch gerne denAhadesign-RSS-Feedkostenfrei abonnieren.

Luminar 2018 gewinnen

SeedingUp | Digital Content Marketing

Ahadesign Tutorials

Deutsche HTMLMap Anleitung hergestellt vom User Aruba aus dem Forum

Wenn noch Fragen sind, kann man Aruba dort auch erreichen.

HTMLMap Anleitung!

  • Grafikprogramm
  • Vorbereiten der Grafik und Ihre externen Links
  • Ihr nehmt ein Grafikprogramm welches das kann,
da kommen viele in Frage.
Bin jetzt nicht ganz sicher,
aber es gibt sogar ein einfaches Programm im Internet,
welches für ein paar Tage nichts kostet.
Am besten eine Suchmaschine füttern mit den Suchwörtern
(Programm HTMLMaps)
  • zuerst Euer gewünschtes Bild laden.

bild1fw

 

Bild1 Fireworks

 

bild2fw

 

Bild2. Fireworks

 

1. Denke nicht, das es was zu erklären gibt, bei diesem Programm auf Bild2

 

bild3fw

 

Bild3. Fireworks

 

Ohne grosse Worte .

 

Bei Gelb reicht es, wen Ihr Fake-Links rein schreibt. Siehe Bild 3

 

bild4fw

 

Bild4. Fireworks

 

Kein Kommentar zu Bild 4, ausser das hier alle Hotspots eingetragen sind.

 

bild5fw

 

Bild5. Fireworks

 

Auf Bild 5 das ist verschieden, je nach Programm was Ihr verwendet.

 

Bei diesem Programm ist es EXPORTIEREN ( siehe Gelb Bild 5 )

 

bild6fw1

 

Bild6-1. Fireworks

 

bild6fw2

 
 

Bild6-2. Fireworks

 

Wenn alles exportiert ist.

 

Diese HTML Datei suchen und anschauen , weil wir aus dieser Datei paar Sachen brauchen nachher.

 

Siehe Bild 7

 

bild7fw

 

Bild7. Fireworks

 

In der Regel brauchen wir dann nur Bild 7 und den Rest nicht mehr ... ausser Ihr ändert Punke auf der Karte.

 

Wir brauchen ja nur die Zahlen bei cords im Bild 7 !

 

Die Zahlen nach cords und href, die brauchen wir.

 

Zu jedem Link sind es andere Zahlen.

 

Soweit ist die Karte schon mal vorbereitet.

 

Vorbereitung ist somit beendet, also der 1. Teil geschafft.

 
 

Jetzt kommt das Eigentliche, das Modul HTMLMap

 
 

I. Einleitung
Die "HTMLMap"-Komponente ermöglicht es Administratoren einer Joomla Website, eigene Image-Maps zu erstellen.

 

II. Eine Image Map ist ein zusammengesetztes Bild mit einer Reihe von Koordinaten. Die aktiven Bereiche, führen zu den verschiedenen Link-Zielen, welche man entweder intern oder extern für eine Website definieren kann.

 
 

II. Installation
Die Installation muss der Administrator ausführen.

 
 

http://joomlacode.org/gf/project/htmlmap/

 

1. Die Komponente,
2. das Modul und
3. das Plugin.

 

Alle 3 Sachen werden über die übliche Methode über das Admin Menü in Joomla installiert.

 
 

Durch die Installation der Komponente wird automatisch im MEDIA MANAGER ein Ordner angelegt mit dem Namen /htmlmaps

 

Die Bilder müssen in diesem Ordner abgelegt werden, da die Komponente darauf zugreift!

 

I. Mit HTMLMap
III.1. Image Map-Erstellung mit HTMLMap
Der erste Schritt um eine Image-Map zu erzeugen, ist das Bild das Sie verwenden möchten in den Mediamanager hochzuladen. Das Bild muss in den Ordner /htmlmaps hochgeladen werden!

 

Bitte Beachten: Wenn Ihr ein Bild für die Hotspots/Rollover-Effekt (Links) verwenden wollt, das Ihr auch diese sogenannten Rollover Bilder nicht vergesst. Hochladen!

 

vorbereitungsbildj

 

Vorbereitungsbild

 

bild1j

 

Bild1

 

Der zweite Schritt besteht darin.

 

Zuerst nach Komponenten gehen, dort müsstet Ihr dann HTML Maps sehen.

 

bild2j

 

Bild2

 

Eine Image-Map wird durch Drücken auf der rechten Seite (Schaltfläche NEU) erschaffen.

 

bild3j

 

Bild3

 

Die Felder sind:
Der Menüpunkt im Zusammenhang mit der Verknüpfung (Ziel des Hyperlinks oder Externer Link).

 

Select an Image = Bild auswählen!

 

Select a Folder = in der Regel nichts angeben, ausser Ihr habt noch zusätzliche Ordner im Media Ordner /htmlmaps

 

Use custom CSS = habe Ich auf Nein.

 

bild4j

 

Bild4

 

Nachher siehe oben

 

Jetzt wird's Interessant

 

bild5j

 

Bild5

 

bild6j

 

Bild6

 

clip_image002

 

Bild7

 

Punkt 1. Da ich einen internen Link verwende für einen Bericht, habe Ich dort keinen Link drin! (Eintrag wählen siehe Bild)

 

Punkt 2. Link zum Artikel Intern oder Extern

 

Punkt 3. Irgend ein Text der erscheint wenn man mit der Maus auf den Link kommt im Bild

 

Punkt 4. Ich habe hier Without title gewählt.

 

Punkt 5. Kann man spielen, ich habe die Einstellung wie auf dem Bild7

 

Punkt6 Hier das Wichtigste, hier kommen die Zahlen rein von der vorher gemachten html Seite

 

Punkt 5.
Abhängig von Ihrer Wahl des Rechteck, Kreis oder Polygon müssen Sie die entsprechenden Koordinaten hinzufügen ...
X, Y, R im Falle einer Kreisform z. B. 20,20,10 (entspricht 20 Pixel vom linken, 20 Pixel vom oberen und einem Radius von 10 Pixel).
X0, Y0, X1, Y1 im Falle der eine rechteckige Form
X0, Y0, X1, Y1 ,..., Xn, Yn im Falle einer polygonalen Form

 

(Optional) Wenn Sie die CSS Tooltips ausser Kraft setzen möchten.

 

bild8j

 

Bild8

 

So ist es bei mir wie im Bild8

 

bild9j

 

Bild9

 

Jetzt haben Wir den 1. Punkt auf der Karte

 

Jetzt machen Wir einen 2. Punkt

 

Jetzt wieder auf Neu und wieder alles Einstellen wie im Bild 7 und 8

 

Und genau so weiter , bis Ihr alle Punkte gemacht habt !

 

bild10j

 

Bild 10

 

Irgendwann schaut es so aus, je mehr Hotspots Ihr eingetragen habt.

 

bild11j

 

Bild 11

 

Jetzt machen Wir ein Menü ;)

 

Neuer Menü Eintrag , das sollte klar sein :) )

 

bild12j

 

Bild 12

 

Punkt 1 das sollte allen klar sein : )

 

Punkt 2. Wichtig Select an image map

 

Unter Erweiterte Parameter Show map title = habe Ich auf Nein

 

Komponentenparameter Include the map within a = habe Ich auf Globale Einstellung

 

Systemparameter

 

Seitentitel anzeigen = Ich habe Nein

 

Die Umsetzung für das Rollover Bild ist ähnlich, aber zuerst müssen alle Bilder im Ordner drin sein.

 

Eigene Anleitung für Rollover Bilder sollte später nachkommen.

 

-----------------------------------------------------------------------------------------------------------------

 

Code zum Einfügen in einem Bericht ( Artikel )

 
 

Hatte Mühe, bis Ich den Trick raus hatte!

 

Wichtig

 

Das muss im Bericht (Artikel) im Editor in der html Ansicht eingetragen werden !!

 

Also wechseln in die HTML Ansicht beim Editor.

 

(htmlmap Zahl position)

 

{htmlmap number position}

 

{htmlmap Zahl position}

 

so genau = {htmlmap 3 right} , {htmlmap 3 left} {htmlmap 3 top} , {htmlmap 3 middle} , {htmlmap 3 bottom}
Zahl ist die ID der Image-Map

 

Position ist die Bildausrichtung, die angewendet werden soll. Es muss einer der folgenden Werte gewählt werden top, middle, bottom, left, right.

 

Sind sicher noch andere Sachen möglich, habe aber noch nicht alles angeschaut. Aber das kommt schon noch, wenn ich Zeit finde.

 

Ich hoffe, dass Euch diese Anleitung ein bisschen helfen wird bei Eurem Einsatz des HTMLMap Modul.

 

Ist nur eine kleine Anleitung für Hotspot.

 
Cookies erleichtern die Bereitstellung unserer Dienste. Über deren Verwendung kann hier frei entschieden werden.
Datenschutzerklärung Ok Ablehnen