What exactly is an Image Map? Do you know? If you are interested in this topic, you have come to the right place. The following explains what an Image Map is, what its purpose is, and in which areas it is used. Examples are also provided to explain where it is most commonly used. The advantages and disadvantages of an Image Map are then described, along with important key terms. Finally, you will find instructions for creating your own Image Map using an app such as “Photoshop”.
To answer the questions above, we first need to clarify the term “Image Map”.
What is an Image Map (German: verweissensitive Grafik)?
Definition
An Image Map is an additional clickable area within a graphic that leads to something specific - either an internal or external platform - or contains specific information on the same page. Image Maps are used to divide a graphic into different areas.
Purpose
An Image Map is intended to simplify navigation for users of a website. In other words, it helps users find their way around more easily.
Examples of use:
- Interactive maps: clicking on a region opens the corresponding area
- Overlays in videos providing additional information and advertising
- Advertisements where different areas of a graphic link to specific products
- Highlighted words that display an explanation of a term when clicked
- A mountain map that contains additional information within the image identifying which mountain is shown
|
Advantages |
Disadvantages |
|
|
|
|
|
|
Important terms that frequently appear in connection with Image Maps:
HTML:
Is a text-based markup language used to structure electronic documents, such as different types of text, images and other content. So-called HTML documents, which are displayed in web browsers, form the foundation of today's World Wide Web.
JavaScript:
Is one of the most important programming languages used in web browsers.
CSS:
Is a stylesheet language for electronic documents and, together with HTML and JavaScript, is one of the core languages of the World Wide Web. It is responsible for the visual appearance of a website.
How do you create an Image Map?
1. Open the image in Photoshop that you want to turn into an Image Map. Then use the “Slice” tool to mark and select the desired area.
2. Click and drag with the Slice tool to draw a bounding box around a section of the image that should later be clickable. Photoshop automatically creates additional slice areas so that each section has its own slice.
3. By right-clicking within a slice area and selecting the “Edit Slice Options” option, you can specify a URL and assign it to the slice, or give the slice a name, and then confirm with OK.
4. Additional slice areas can also be created by dragging the mouse.
5. Changes can be made using the “Slice Selection Tool”.
Saving the Image Map
1. Select “File” and then “Save for Web” to open the “Save for Web” window.
2. Continue to “Preset” and select one of the following options: GIF 128 Dithered, JPEG High or PNG-24.
3. Then use “Save” to save the file to a file or folder on your hard drive where you want to store the Image Map file, and assign a name.
4. Then click the “Format” dropdown menu and select “HTML and Images” to save the project.
That's it! You have now created your own Image Map, which you can add to a website.
Do you have any further questions about this topic? Or would you like to create your own website with a custom Image Map? Then feel free to contact us!
