Image Map


What is an Image Map?

An image map is an image that acts as a link, but instead of simply acting as a link to a single page, the image acts as a link to multiple pages. For instance, say you have a map of the United States that you wish to act as an image map. Then you could specify different areas of the map to take you to different pages.

An image map consists of two parts. First, there is the image itself. This can be any image, so you don’t need to alter the image in any way to make it act as an image map. The functionality to point to different links comes from within the HTML code itself. This is where the Image Map plugin for TinyMCE4 will handle the difficult mapping conversion.

Select an Image

Use the WordPress media manager to select an image and insert it into the content area. Once the image is inserted, it can be clicked (to become active), and the Image Map button will also become active.

Clicking the Image Map button will open a window, where are graphical interface can be used to set the coordinates.

Image Map WP Edit Pro

Image Map Overlay Window

The Image Map overlay window will open.

Image Map WP Edit Pro

This window will be used to configure the map. There are four main sections to the overlay window.

Image Map Areas

The image map areas section is used to add/edit/delete current image hot spots. A hot spot is the area where the user will click, sending them to the corresponding link.

Image Map WP Edit Pro

Multiple hot spot areas can be set by clicking the “add” icon.

Image Map Area Attributes

There are a few options which can be set for each map hot spot.

  • Shape – A dropdown selector is used to select between “rectangle”, “circle” and “polygon”.
  • Coords – The coordinates for the image map. These will auto-populate as the image map is drawn.
  • Href – The location where the user will be sent when they click the hot spot (a URL).
  • Alt – The alternate text to show when the user hovers over the hot spot.
  • Target – The target window to send the user. Options include “this window”, “new window” and “top window”.

Status

The status section will provide instructions for how to use each tool; and provide feedback for what action to take next when working with a hot spot.

Image Map WP Edit Pro

Image

This section will load the currently selected image, and this is the active area where you can configure each hot spot.

Image Map WP Edit Pro

Each hot spot will be highlighted; and it’s number corresponds to the label used in the “Image Map Areas” section (above). Different labels can be used; such as numbers, alt text, coordinates, href links, or no label.

Code

The code section will display the HTML code used for the image map.

Image Map WP Edit Pro

The Code section can be used if further refining of the image map coordinates is necessary.

Set Image Map Areas

Once an image has been selected, and the Image Map Overlay Window has been opened, we can begin setting our image hot spots.

Select Shape

The first step is to determine which shape to use; options include “rectangle/square”, “circle” and “polygon”. Use the dropdown selector to make your selection.

Image Map WP Edit Pro

Create Shape on Image

Next, click once on the image where the hot spot will begin. Watch the “Status” section box, as it will provide instructions for how to progress through the hot spot creation process.

Image Map WP Edit Pro

For rectangles, squares and circles; a single click will begin the shape, and another single click will end the shape.

For polygon shapes; a single click will begin the shape, each subsequent click adds another marker, and shift+click will end the shape.

Define Hot Spot Href, Alt and Target Values

Once all hot spots have been defined, we can now go back and assign the appropriate href link, alt and target values.

Image Map WP Edit Pro

Insert Completed Image Map

The completed map can be inserted into the content editor by simply clicking the “Okay” button. The editor HTML will be adjusted to include the map, and all corresponding options which were set earlier.

Edit an Image Map

Another great feature; after a map has been created and inserted for an image, it can be clicked again to be edited or further refined.

The image map button will first check to see if a map already exists for the image, and if one is found, it will load it into the image map overlay window for editing.

Remove an Image Map

A map can be easily removed from an image by selecting the image, clicking the Image Map toolbar button, and finally clicking the “Remove Map” button in the overlay window.


Josh Lobe has written 53 articles

Josh Lobe is the sole developer of WP Edit and WP Edit Pro. A father of two; a husband to a beautiful wife; and a small home in the suburbs... he primarily enjoys coding in WordPress and designing websites.

4 thoughts on “Image Map

  1. Wim Bax says:

    This plugin is one of the main reasons to buy WP Edit Pro.
    Unfortunately I discovered that on the mobile phone the coordinates are not correct anymore. if the mobile view is activated in the Weaver II Pro theme.

Leave a Reply

Your email address will not be published. Required fields are marked *

ENTER CAPTCHA MATH *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>