Help & Instructions

Here you will find explanations and help for the image editor.

General

ImageMarker is an online image editor that enables its users to create images interactively with multimedia content and to use them on their own website.

You can start the image editor directly in your internet browser without downloading or installing it and work with it.

You can try out the image editor and create an interactive image with it without paying. If you want to use all the functions of the image editor or want to embed your interactive image on your own website, you need a premium account.

The image editor is compatible with almost all current browsers (Firefox, Edge, Chrome, Opera, Safari & Co.). However, the old Internet Explorer sometimes has display errors.

You can upload and edit image files with the ending *.jpg, *.jpeg, *.gif, *.png, *.bmp in the image editor.

The maximum file size for an image file is 5MB. The image resolution does not matter. If you want to edit pictures with more than 5MB, you can link them via your own web space path and edit them in the picture editor.

You can use your images edited with ImageMarker commercially and publish them on websites. You must dispose of the image rights for your images. ImageMarker does not adopt your image rights as its own.

Your interactive images are saved and can be used indefinitely. You have the option of deleting your projects, images and data yourself.

Your interactive images created with ImageMarker remain fully available to you even after your premium account has expired. You can continue to use them on your website without any restrictions.

Here you can copy a demo image code and test it on your website. Copy the complete picture code and paste it in the desired place in your website. Note the various installation instructions for Jimdo, Wix and Wordpress below on "Include image code".

Basic functions

Registering with ImageMarker is quick and easy. Simply start the image editor and click in the menu at the top right on "Login" and then on "Register".

Start the image editor and click on "Login" in the menu at the top right.

Start the image editor and click on "Log in" in the menu at the top right, then click on "Forgot your password".

To create a premium account, start the image editor and click on "Login" in the menu at the top right. If you haven't registered yet, click on "Register" and create an account. Log into your account and a window will appear with a selection of premium options. Alternatively, you can access this option via your profile and the "Upgrade" button.

You can pay for your premium account with PayPal. If you do not have a PayPal account, you can also pay by direct debit as a PayPal guest.

If your premium account has expired, the window with the premium options will appear again after you log in and you can select a term.

Image composition

Select the tooltip that you want to edit. Click on the small brush symbol above the tooltip. In the tooltip style window you can now adjust the color code for the background color of your tooltip in the "BG color" field.

You can insert colors in certain color fields of the image editor using HEX codes. A hexadecimal code is used to specify color values ​​in the RGB color space. You can find a table with color codes under the following link https://www.farb-tabelle.de/en/table-of-color.htm

1. Click on the marking in your picture and open the picture construction kit via the "A symbol".

2. Drag the picture component into your picture description and click on the placeholder picture.

3. Copy the complete image path from the image that you want to display in your image description and click anywhere to confirm the change.

4. Make sure that the image path is a JPG, PNG or GIF image and that the image is saved online.

If you don't have your own web space to manage your images, you can upload your preview images here, for example: https://bilderupload.org

View the video description: https://youtu.be/_Sj6xnxK47Q

You can use the cross symbol above the image marker to position your image description anywhere within your image.

Select the tooltip with the text that you want to adjust and click on the small "A" symbol above the tooltip. Now click on the text in your tooltip. In the tooltip content window you can now adjust your text under the menu item "Font".

Under "Projects" open the interactive picture that you want to duplicate. Then click on "Code" and copy the code snippet. Click on "New" to create a new project. Open "Import" and copy part of the following code snippet into the field.

To import an image, first save your image code generated by the image editor in a text file. Then copy the following code snippet from the image code:
.imagemarker({"id"......... bis ...... }]}]});});})(jQuery, window, document);
Add the code snippet to "Import" in the image editor. Then click on "Import". Your picture will now appear in the picture editor.

Markings

Pins are small symbols that you can use in your picture. In the ImageMarker library you can choose from over 600 additional pins and symbols.

With the rectangle tool you have the possibility to mark angular objects on your picture.

With the ellipse tool you have the possibility to mark round objects on your picture.

With the polygon tool you can freely mark objects on your picture and set your own marking points. To complete the marking, connect the first point with the last.

Click on the text Smybol in the bar on the left and in the desired place on your picture where the text should appear. Now you can write your text using the text field in the menu on the right.

Image construction kit (content builder)

You can open the picture construction kit via the "A-Icon" above your picture marker or alternatively via the menu on the right-hand side under "Tooltip"> "Edit content".

With the picture construction kit (tooltip content) you can place different elements such as texts, pictures or videos in your picture markings. Simply drag and drop the desired element to any position in your picture marker to place it there.

In the image construction kit (tooltip content) you can adjust and change your image marking under "Settings", texts, images or videos.

To link an image, it must be on an online web space. Enter the complete image path in the corresponding field (the image path must start with https: // and end with JPG, PNG or GIF).

If you don't have your own web space to manage your images, you can upload your preview images here, for example: https://bilderupload.org

Use image code

1. Install the plugin "Insert HTML Snippet" in your Wordpress under "Plugins"> "Install"> "Upload plugin".

2. Click in the Wordpress admin area on "XYZ Html" and "Add new HTML Snippet".

3. Give your image a title (Tracking Name) and add the ImageMarker's code to the "HTML Code" field and save (Create).

4. Copy the shortcode from the list by clicking on the" <> "symbol. The shortcode looks like this e.g. "[xyz-ihs snippet =" test "]"

5. Go to a post or page and paste the snippet there.

1. Copy the complete picture code in the picture editor.

2. Now open your website at Jimdo, click on "Menu" at the top and then on "Settings".

3. Go to "Edit head", copy both lines of text from the image code which begin with "link" into the field and click on "Save".

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

(This code only needs to be inserted once into the head. No matter how many images you use on your Jimdo site.)

4. Go back to page editing and click on "Add content" at the point on your website where the interactive image should be displayed.

5. Click on "More content and add-ons".

6. Open the "Widget HTML" window and copy the complete image code from ImageMarker into the field.

7. Save your change and wait a moment for Jimdo to process the image code.

9. Click on "Save". Done!

View video description: https://youtu.be/kh0nJ7lptig

1. Copy the complete picture code from the picture editor (code).

2. Open your website at WIX and select the page and location where you want to place your interactive picture.

3. Now click on the "Cross" symbol on the left and select "Embed".

4. Open "Embed Widget". A gray box will appear on your website.

5. Click on "Enter HTML code" and paste the complete image code from ImageMarker into the field.

6. Confirm your change by clicking "Update".

View video description: https://youtu.be/P7V7m0GX4aw

1. Copy the complete picture code from the picture editor (code).

2. Now open your website at Duda and select the page and location where you want to place your interactive picture.

3. Click on "Widgets" in the menu on the left and drag the "HTML" module into your website.

4. Copy the image code from ImageMarker into the "HTML Content" and click on "Update".

View video description: https://youtu.be/0Wt6EjJqh3o

1. Copy the complete picture code in the picture editor.

2. Use the "HTML widget" to add the image code to your 1und1 website at the point where the image should appear later.

3. Click on "Settings" and "Customize advanced settings".

4. Go to "Edit Head" and paste the following code:
<link href="https://code.jquery.com/jquery-3.4.1.min.js">
<link href="https://imagemarker.com/studio/js/imagemarker.min.js">

5. Save your change. Ready!

1. Go to the page in your Typo3 admin area where you want to use the interactive image.

2. Click on "Content" and then on "Special Items".

3. Click on "Pure HTML" and paste the image code into the "HTML code" field.

4. Save the page and go to "Save and display page" (at the top of the menu).

Your interactive image will now be displayed on your website.

Copy the complete image code in the ImageMarker image editor under the menu item "Code" and insert it at the desired location in your HTML website.

If you would like to display multiple interactive images on the same page of your website, please proceed as follows.

1. Copy the picture code from the picture editor.

2. Find and change the following three HTML commands in the image code:

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

3. Complete the HTML commands with a consecutive number for each of your interactive images.

For example:
id = "imagemarker-per-container2
# imagemarker-pro-container2

4. Change the number after "imagemarkerPro ({"id":XXX") to a number of your choice.

For each new picture that should be displayed on a page, change the number (1, 2, 3, 4 ...).

View video description: https://youtu.be/w53UM2YvU8U

Premium account

You can register your premium account in the image editor. Log in to the image editor via the menu item "Login" and then click on "Profile" and "Premium".

You will automatically receive an invoice as a PDF attachment to the email address given at ImageMarker.

If you pause your premium account on ImageMarker or do not want to renew it any further, you can still use the interactive images you have created on your website without any restrictions.

Frequently asked Questions

Your images and projects created with the image editor will be saved without a time limit. You can delete your projects yourself at any time.

You can use your interactive images created with ImageMarker to the full extent on your website, even if your premium account has already expired.

The interactive images created with the ImageMarker image editor cannot be used offline.

Data protection

If you create interactive images with ImageMarker and use them on your website, the following integrations of services and content from third parties are used:


Font Awesome
We use Font Awesome from the American company Fonticons (307 S. Main St., Suite 202, Bentonville, AR 72712, USA). When you visit one of our websites, the Font Awesome web font (especially icons) is displayed over the font Loaded awesome content delivery network (CDN). The texts or fonts and icons are displayed appropriately on every device. In this data protection declaration we go into more detail on the data storage and data processing by this service. You can find the data protection declaration here: https://fontawesome.com/privacy


jquery.com Code
JavaScript code from jquery.com (JSFoundation, Inc., Attn: Privacy Office, 1 Letterman Drive, San Francisco, CA 94129, USA) may be integrated on our website. The jquery.com JavaScript code is used in the interest of an appealing and fast presentation of our online offers. This represents a legitimate interest within the meaning of Art. 6 Para. 1 lit.f GDPR When you visit our website, a direct connection is established between your browser and the jquery.com servers. jquery.com receives the information that you are visiting our site with your IP address. Further information on the handling of user data can be found in the JSFoundation data protection declaration at: https://js.foundation/about/governance/privacy -policy


Cloudflare
We use Cloudflare from Cloudflare, Inc. (101 Townsend St., San Francisco, CA 94107, USA) on this website to make our website faster and safer. Cloudflare uses cookies and processes user data. Cloudflare, Inc. is an American company that offers a content delivery network and various security services. These services are located between the user and our hosting provider. We will try to explain in more detail below what all this means. You can find the data protection declaration here: https://www.cloudflare.com/de-de/privacypolicy/

Troubleshooting

If there are problems uploading images or the image path, please check whether the image size is max. 5 MB and the file format has one of the following extensions: * .jpg, * .jpeg, * .png, * .gif. If you are using your own image path, please check that you have entered the correct image path and that the ending ends with a valid image format.

If the image editor has problems loading, restart the browser. If the image editor still does not load, please clear your browser's cache to fix the problem.

If the image editor frequently crashes (freezes) or the display of icons or the menu is incorrect, please restart your browser first. If the error persists, clear your browser's cache and restart the image editor. In most cases this solves the problem.

It is possible to have multiple interactive images displayed on one website. You can find the instructions for this under > Embed image code

If you cannot register or log in, please empty your browser's cache. In most cases this solves the problem.