Hilfe & Anleitungen

Hier findest Du Erklärungen & Hilfestellungen zum Bildeditor.

Allgemeines

ImageMarker ist ein Online-Bildeditor, der es seinen Benutzern ermöglicht, Bilder interaktiv mit multimedialen Inhalten zu gestalten und diese auf der eigenen Website zu verwenden.

Du kannst den Bildeditor ohne Download oder Installation direkt in deinem Internet-Browser starten und damit arbeiten.

Du kannst ohne Bezahlen zu müssen, den Bildeditor ausprobieren und ein interaktives Bild damit gestalten. Wenn du alle Funktionen des Bildeditors verwenden möchtest oder dein interaktives Bild auf deiner eigenen Website einbinden willst, ist ein Premium-Account nötig.

Der Bildeditor ist mit fast allen aktuellen Browsern kompatibel (Firefox, Edge, Chrome, Opera, Safari & Co.). Allerdings kommt es beim alten Internet-Explorer manchmal zu Darstellungsfehlern.

Du kannst Bilddateien mit der Endung *.jpg, *.jpeg, *.gif, *.png, *.bmp im Bildeditor hochladen und bearbeiten.

Die maximale Dateigröße für eine Bilddatei liegt bei 5MB. Die Bildauflösung spielt dabei keine Rolle. Wenn Du Bilder mit mehr als 5MB bearbeiten möchtest, kannst Du diese über Deinen eigenen Webspace-Pfad verlinken und im Bildeditor bearbeiten.

Deine mit ImageMarker bearbeiteten Bilder kannst du kommerziell nutzen und auf Websites veröffentlichen. Über die Bildrechte deiner Bilder musst Du verfügen. ImageMarker macht sich deine Bildrechte nicht zu Eigen.

Deine interaktiven Bilder bleiben für eine unbegrenzte Zeit gespeichert und können verwendet werden. Du hast die Möglichkeit deine Projekte, Bilder und Daten selbst zu löschen.

Deine mit ImageMarker erstellten interaktiven Bilder bleiben auch nach Ablauf Deines Premium-Account in vollem Umfang für Dich verfügbar. Du kannst diese auch weiterhin ohne Einschränkungen auf Deiner Website verwenden.

Hier kannst du einen Demo-Bildcode kopieren und auf Deiner Website testen. Kopiere den kompletten Bildcode und füge diesen an der gewünschten Stelle in deiner Website ein. Beachte die verschiedenen Installationshinweise für Jimdo, Wix und Wordpress weiter unten auf "Bildcode einbinden".

Grundfunktionen

Die Anmeldung bei ImageMarker geht schnell und ist unkompliziert. Starte einfach den Bildeditor und klicken oben rechts im Menü auf "Einloggen" und anschließend auf "Anmelden".

Starten den Bildeditor und klicke oben rechts im Menü auf "Einloggen".

Starte den Bildeditor und klicke oben rechts im Menü auf "Einloggen", klicken anschließend auf "Passwort vergessen".

Um einen Premium-Account zu erstellen, starte den Bildeditor und klicke oben rechts im Menü auf "Einloggen". Wenn du Dich noch nicht angemeldet hast, klicke auf "Anmelden" und erstelle einen Account. Logge dich in Deinen Account ein und es erscheint ein Fenster mit einer Auswahl an Premium-Optionen. Alternativ kommst du über dein Profil und den Button "Upgrade" zu dieser Option.

Du kannst Deinen Premium-Account mit PayPal bezahlen. Solltest Du keinen PayPal-Account besitzen, kannst Du die Bezahlung auch als Gast bei PayPal per Bankeinzug vornehmen.

Wenn Dein Premium-Account abgelaufen ist, erscheint nach Deinem Login erneut das Fenster mit den Premium-Optionen und Du kannst eine Laufzeit auswählen.

Bildgestaltung

Wähle das Tooltip aus, welches Du bearbeiten möchtest. Klicke über dem Tooltip auf das kleine Pinsel-Symbol. Im Tooltip Style Fenster kannst du nun den Farbcode für die Hintergrundfarbe deines Tooltip im Feld "BG Farbe" anpassen.

Du kannst in bestimmten Farbfeldern des Bildeditors Farben anhand von HEX Codes einfügen. Mit einem Hexadezimal-Code werden Farbwerte im RGB-Farbraum angegeben. Unter folgendem Link findest Du eine Tabelle mit Farbcodes https://www.farb-tabelle.de/de/farbtabelle.htm

Über das Kreuzsymbol über der Bildmarkierung kannst du deine Bildbeschreibung an einer beliebigen Stelle innerhalb deines Bildes positionieren.

1. Klicke auf die Markierung in deinem Bild und öffne den Bild-Baukasten über das "A-Symbol".

2. Ziehe den Bild-Baustein in deine Bildbeschreibung und klicke auf das Platzhalter-Bild.

3. Kopiere den kompletten Bildpfad vom Bild, welches Du in deiner Bildbeschreibung anzeigen lassen möchtest und klicke auf eine beliebige Stelle, um die Änderung zu bestätigen.

4. Achte beim Bildpfad darauf, dass es sich um ein Bild mit dem Bildformat JPG, PNG oder GIF handelt und das Bild online gespeichert ist.

Wenn Du keinen eigene Webspace zum verwalten deiner Bilder hast, kannst du deine Vorschaubilder zum Beispiel hier hochladen: https://bilderupload.org

Videobeschreibung anschauen: https://youtu.be/_Sj6xnxK47Q

Wähle das Tooltip mit dem Text aus, welchen Du anpassen möchtest und klicke über dem Tooltip auf das kleine "A" Symbol. Klicke nun auf den Text in deinem Tooltip. Im Tooltip Content Fenster kannst du nun unter dem Menüpunkt "Font" deinen Text anpassen.

Öffne unter "Projekte" das interaktive Bild welches Du duplizieren möchtest. Klicke anschließend auf "Code" und kopiere den Codeschnipsel. Klicken auf "Neu" um ein neues Projekt zu erstellen. Öffne "Import" und kopiere den Teil des folgenden Codeschnipsel in das Feld.

Um ein Bild zu importieren, speicher zunächst Deinen vom Bildeditor generierten Bildcode in einer Textdatei ab. Kopiere anschließend folgenden Codeschnipsel aus dem Bildcode:
.imagemarker({"id"......... bis ...... }]}]});});})(jQuery, window, document);
Füge den Codeschnipsel bei "Import" im Bildeditor ein. Klicke anschließend auf "Importieren". Dein Bild erscheint nun im Bildeditor.

Markierungen

Pins sind kleine Symbole, welche Du in deinem Bild einsetzen kannst. In der ImageMarker Bibliothek hast du die Auswahl an über 600 weiteren Pins und Symbolen.

Mit dem Rechteck-Werkzeug hast Du die Möglichkeit eckige Gegenstände auf Deinem Bild zu markieren.

Mit dem Ellipse-Werkzeug hast Du die Möglichkeit runde Gegenstände auf Deinem Bild zu markieren.

Mit dem Polygon-Werkzeug kannst Du Gegenstände auf Deinem Bild frei markieren und eigene Markierungspunkte setzen. Um die Markierung abzuschließen, verbinde den ersten Punkt mit dem Letzten.

Videobeschreibung anschauen: https://youtu.be/_ux41-8UnhQ

Klicke auf das Text Smybol in der Leiste links und in die gewünschte Stelle auf deinem Bild, wo der Text erscheinen soll. Nun kannst du über das Textfeld im Menü rechts deinen Text schreiben.

Bild-Baukasten (Content Builder)

Den Bildbaukasten kannst du über das "A-Icon" über deiner Bildmarkierung öffnen oder alternativ über das Menü auf der rechten Seite unter "Tooltip" > "Inhalte bearbeiten".

Mit dem Bild-Baukasten (Tooltip Content) kannst du verschiedene Elemente wie Texte, Bilder oder Videos in deiner Bildmarkierung platzieren. Ziehe einfach per Drag-and-Drop das gewünschte Element an eine beliebige Stelle in deiner Bildmarkierung, um dieses dort zu platzieren.

Im Bild-Baukasten (Tooltip Content) kannst du unter "Einstellungen", Texte, Bilder oder Videos in deiner Bildmarkierung anpassen und verändern.

Um ein Bild zu verlinken, muss dieses auf einem Online-Webspace liegen. Gebe hierfür den kompletten Bildpfad in das entsprechende Feld ein (der Bildpfad muss mit https:// beginnen und mit JPG, PNG oder GIF enden).

Wenn Du keinen eigene Webspace zum verwalten deiner Bilder hast, kannst du deine Vorschaubilder zum Beispiel hier hochladen: https://bilderupload.org

Bildcode einbinden

1. Installiere das Plugin "Insert HTML Snippet" in deinem Wordpress unter "Plugins" > "Installieren" > "Plugin hochladen".

2. Klicke im Wordpress Adminbereich auf "XYZ Html" und " Add new HTML Snippet".

3. Gebe deinem Bild einen Titel (Tracking Name) und füge den Bildcode von ImageMarker in das Feld "HTML Code" ein und speicher (Create) ab.

4. Kopiere aus der Liste den Shortcode, indem Du auf das Symbol "<>" klickst. Der Shortcode sieht z.B. so aus "[xyz-ihs snippet="test"]"

5. Gehe auf einen Beitrag oder eine Seite und füge den Snippet dort ein.

1. Kopiere den kompletten Bildcode im Bildeditor.

2. Öffne nun deine Website bei Jimdo, klicke oben auf "Menü" und anschließend auf "Einstellungen".

3. Gehe auf "Head bearbeiten", kopiere aus dem Bildcode beide Textzeilen welche mit "link" beginnen in das Feld und klicke auf "Speichern".

<link href="https://code.jquery.com/jquery-3.4.1.min.js">
<link href="https://imagemarker.com/studio/js/imagemarker.min.js">

(Dieser Code muss nur einmal in den Head einfügen. Egal wieviele Bilder Du auf deiner Jimdo-Seite verwendest.)

4. Gehe zurück zur Seiten-Bearbeitung und klicke an der Stelle deiner Webseite auf "Inhalt hinzufügen", an welcher das interaktive Bild angezeigt werden soll.

5. Klicke auf "Weitere Inhalte und Add-ons".

6. Öffne das "Widget HTML" Fenster und kopiere den kompletten Bildcode von ImageMarker in das Feld.

7. Speicher deine Änderung und warte kurz, bis Jimdo den Bildcode verarbeitet hat.

9. Klicke auf "Speichern". Fertig!

Videobeschreibung anschauen: https://youtu.be/kh0nJ7lptig

1. Kopiere den kompletten Bildcode aus dem Bildeditor (Code).

2. Öffne deine Website bei WIX und wähle die Seite und Stelle aus, wo du dein interaktives Bild platzieren möchtest.

3. Klicke nun auf der linken Seite auf das "Kreuz" Symbol und wähle "Einbetten" aus.

4. Öffne "Widget einbetten". Es erscheint ein graues Feld auf deiner Website.

5. Klicke auf "HTML-Code eingeben" und füge den kompletten Bildcode von ImageMarker in das Feld ein.

6. Bestätige Deine Änderung, indem du auf "Aktualisieren" klickst.

Videobeschreibung anschauen: https://youtu.be/P7V7m0GX4aw

1. Kopiere den kompletten Bildcode aus dem Bildeditor (Code).

2. Öffne nun deine Website bei Duda und wähle die Seite und Stelle aus, wo du dein interaktives Bild platzieren möchtest.

3. Klicke links im Menü auf "Widgets" und ziehe den "HTML" Baustein in deine Website.

4. Kopiere den Bildcode von ImageMarker in den "HTML Content" und klicke auf "Update".

Videobeschreibung anschauen: https://youtu.be/0Wt6EjJqh3o

1. Kopiere den kompletten Bildcode im Bildeditor.

2. Füge mit Hilfe des "HTML-Widget" den Bildcode auf Deine 1und1-Website an der Stelle ein, wo später das Bild erscheinen soll.

3. Klicke auf "Einstellungen" und "Erweiterte Einstellungen anpassen".

4. Gehe auf "Head bearbeiten" und füge den folgenden Code ein:
<link href="https://code.jquery.com/jquery-3.4.1.min.js">
<link href="https://imagemarker.com/studio/js/imagemarker.min.js">


5. Speicher Deine Änderung ab. Fertig!

1. Gehe in Deinem Typo3 Adminbereich auf die Seite, wo Du das interaktive Bild verwenden möchtest.

2. Klicke auf "Inhalt" und auf "Besondere Elemente".

3. Klicke auf "Reines HTML" und füge den Bildcode in das Feld "HTML-Code" ein.

4. Speicher die Seite ab und gehe auf "Seite speichern und anzeigen" (oben im Menü).

Dein interaktives Bild wird nun auf Deiner Website angezeigt.

Kopiere im ImageMarker Bildeditor unter dem Menüpunkt "Code" den kompletten Bildcode und füge diesen an der gewünschten Stelle in Deiner HTML-Website ein.

Wenn Du mehrere interaktive Bilder auf der gleichen Seite Deiner Website anzeigen lassen möchtest, gehe bitte wie folgt vor.

1. Kopiere den Bildcode aus dem Bildeditor.

2. Finde und ändere im Bildcode folgende drei HTML-Befehle:

id="imagemarker-pro-container
#imagemarker-pro-container
imagemarkerPro({"id":

3. Ergänze die HTML-Befehle mit einer fortlaufenden Zahl für jedes Deiner interaktiven Bilder.

Zum Beispiel:
id="imagemarker-pro-container2
#imagemarker-pro-container2

4. Ändere die Zahl hinter "imagemarkerPro({"id":XXX" in eine Zahl Deiner Wahl.

Für jedes neue Bild, welches auf einer Seite angezeigt werden soll, ändere die Zahl (1, 2, 3, 4...).

Videobeschreibung anschauen: https://youtu.be/w53UM2YvU8U

Premium-Account

Du kannst deinen Premium-Account im Bildeditor anmelden. Melde dich im Bildeditor über den Menüpunkt "Login" an und klicke anschließend auf "Profil" und "Premium".

Du erhälst automatisch eine Rechnung als PDF-Anhang an die bei ImageMarker angegebene E-Mail-Adresse geschickt.

Wenn du deinen Premium-Account auf ImageMarker pausierst oder nicht weiter verlängern möchtest, kannst du deine erstellten interaktiven Bilder trotzdem weiterhin ohne Einschränkungen auf deiner Website nutzen.

Häufig gestellte Fragen

Deine mit dem Bildeditor erstellten Bilder und Projekte bleiben ohne zeitliche Begrenzung gespeichert. Du kannst deine Projekte jederzeit selbst löschen.

Deine mit ImageMarker erstellten interaktiven Bilder kannst Du unbegrenzt und in vollem Umfang auf deiner Website nutzen, auch wenn dein Premium-Account bereits abgelaufen ist.

Die mit dem ImageMarker Bildeditor erstellten interaktiven Bilder können nicht offline verwendet werden.

Datenschutz

Wenn Du interaktive Bilder mit ImageMarker erstellst und auf Deiner Website verwendest, werden folgende Einbindungen von Diensten und Inhalten Dritter verwendet:


Font Awesome
Wir verwenden auf unserer Website Font Awesome des amerikanischen Unternehmens Fonticons (307 S. Main St., Suite 202, Bentonville, AR 72712, USA). Wenn Sie eine unserer Webseite aufrufen, wird die Web-Schriftart Font Awesome (im Speziellen Icons) über das Font Awesome Content Delivery Netzwerk (CDN) geladen. So werden die Texte bzw. Schriften und Icons auf jedem Endgerät passend angezeigt. In dieser Datenschutzerklärung gehen wir näher auf die Datenspeicherung und Datenverarbeitung durch diesen Service ein. Die Datenschutzerklärung finden Sie hier: https://fontawesome.com/privacy


jquery.com Code
Auf unseren Seiten kann JavaScript-Code von jquery.com (JSFoundation, Inc., Attn: Privacy Office, 1 Letterman Drive, San Francisco, CA 94129, USA) integriert sein. Die Nutzung des JavaScript-Code von jquery.com erfolgt im Interesse einer ansprechenden und schnellen Darstellung unserer Online Angebote. Dies stellt ein berechtigtes Interesse im Sinne von Art. 6 Abs. 1 lit. f DSGVO dar Wenn Sie unsere Seiten besuchen, wird eine direkte Verbindung zwischen Ihrem Browser und den Servern von jquery.com hergestellt. jquery.com erhält dadurch die Information, dass Sie mit Ihrer IP-Adresse unsere Seite besuchen. Weitere Informationen zum Umgang mit Nutzerdaten finden Sie in der Datenschutzerklärung von JSFoundation unter: https://js.foundation/about/governance/privacy-policy


Cloudflare
Wir verwenden auf dieser Website Cloudflare der Firma Cloudflare, Inc. (101 Townsend St., San Francisco, CA 94107, USA), um unsere Webseite schneller und sicherer zu machen. Dabei verwendet Cloudflare Cookies und verarbeitet User-Daten. Cloudflare, Inc. ist eine amerikanische Firma, die ein Content Delivery Network und diverse Sicherheitsdienste anbietet. Diese Dienste befinden sich zwischen dem User und unserem Hosting-Anbieter. Was das alles genau bedeutet, versuchen wir im Folgenden genauer zu erläutern. Hier finden Sie die Datenschutzerklärung: https://www.cloudflare.com/de-de/privacypolicy/

Fehlerbehebung

Sollte es zum Probleme beim Upload von Bildern oder dem Bildpfad kommen, prüfe bitte, ob die Bildgröße max. 5 MB hat und das Dateiformat eines der folgenden Endungen hat: *.jpg, *.jpeg, *.png, *.gif. Wenn du deinen eigenen Bildpfad verwenden, prüfe bitte, ob du den korrekten Bildpfad angegeben hast und die Endung mit einem gültigen Bildformat endet.

Wenn der Bildeditor probleme beim Laden hat, starte den Browser neu, sollte der Bildeditor weiterhin nicht Laden, leere bitte den Cache deines Browsers um das Problem zu beheben.

Wenn der Bildeditor häufig abstürzt (einfriert) oder die Darstellung von Icons oder dem Menü fehlerhaft ist, starte bitte zunächst deinen Browser neu. Sollte der Fehler weiterhin auftauchen, lösche den Cache deines Browsers und starte den Bildeditor erneut. In den meisten Fällen ist der Fehler damit behoben.

Es ist möglich, mehrere interaktive Bilder auf einer Website anzeigen zu lassen. Die Anleitung hierfür findest du unter > Bildcode einbinden

Wenn Du dich nicht Registrieren oder Einloggen kannst, leere bitten den Cache Deines Browsers. Das Problem ist in den meisten Fällen damit behoben.