An image map is when you place markers or clickable areas on top of an image. This is really useful for things like maps or diagrams that need some interactive labels.
In this video I take you through setting one up. For this example i'll be adding pins to make of the USA.
Get the plugin here: https://www.wpeagle.com/imagehotspot
Heres the features of it, as written by the dev:
Features
- Easy to install and setup with WordPress, live working preview of the HotSpot on the edit page, help you update HotSpot easily, something like wysiwyg (What You See Is What You Get).
- Draggable icons in the backend, let you update the hotspot’s position easily with mouse drag, you can see the demo video in YouTube.
- 4 directions of popover, can be in top, right, bottom and left.
- Responsive, works fine with small screen device.
- Compatible with latest jQuery(1.10.x) and latest WordPress.
- Multiple HotSpot instance on same page, unlimited HotSpot you can add to a image.
- Enqueue the js and css only when needed. Keep WordPress page size smaller.
- You can add/edit the Image HotSpot without touching the code. Customize/update the image and text with WordPress backend.
- CSS3 transition support, fade only on the older browser, like IE8.
- Optional auto delay slideshow.
- FAQ and source code are included in the package. Free update in the future.
Comments
Hi…I enjoyed your video about image maps but I’m actually looking for a plugin that allows me to draw shapes around areas and, on clicking, information pops up. Specifically it’s a layout of a new housing development where information on each plot needs to be available to potential buyers (cost, size, etc).
Any advice?
Maggie
I’m not sure this plugin will do the job but i’m sure there are some that will.
Take a look here to start and try some out: https://wordpress.org/plugins/tags/image-map
-Alex
Hi, Will it allow me to set several clickable icons to display another png with a transparent background over the original main image displaying the site in the background.
Yeah, that should be fine..
Looks simple. We bought a plugin similar to this called WP Hotspots. It doesnt work well and is really difficult for a client to use. I like your version, but we need to also add a URL to the Hotspot, is this something you can do? I’v e provided the page where we have the current plugin.
The old site is a Joomla and it does what we need WordPress to do: http://hiwd.biz/homelife/index.php/virtual-home-main/vh-bathroom.
Can you look and let me know if you can do something similar?
Hi there,
We will be using 4 images on a single page and there will be squares say roughly around 70 on each image.So I want to know
1)Is there any restriction on the the number of pin that can be used on a single image.
2)Also I want to know whether the 4 images could be shown on the single page or not?as you have shown only one image on a page in your video
3)How to maintain gaps gaps between the 4 images.
Expecting a quick reply from you as I want to integrate the plugin asap on my client demand
Thanks in advance