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.
Image Map Overlay Window
This window will be used to configure the map. There are four main sections to the overlay window.
Image Map Areas
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”.
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.
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.
Create Shape on Image
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
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.