Update 1/6/2015: Since writing this post, I have found www.image-maps.com/ which makes the process much easier. Simply choose a file to use for the map and upload it, then you will see your image and click to continue. Next, right click on the image to get the drop down menu. From there, create the rectangle that you want to be clickable. Add in your info to the popup box. Continue this for as many clickable areas as you want. Then right click again and choose “Get Code”. Choose the tab that says HTML Cod and scroll to the bottom to copy your code. If you are not creating an account, be sure to change the image link from image-maps.com to your own image.
Another option:
Recently I had a client who wanted a custom image of a map, but wanted visitors to be able to hover over her location and have the address pop up as alt text and a link that would take them to Google Map directions when they clicked on it. I’ve always hated doing image mapping because it is so time consuming, but I recently came upon this great video that shows exactly how to do it easily using www.mobilefish.com/services/image_map/image_map.php.
If you want to add a hotspot to your image, this is a great way to do it.
Client sample coming soon!
Lynn says
June 11, 2015 at 9:16 pmThanks for this great tutorial. Just wondering if the image map will be responsive? And if not, is there a way to fix that?
Laura Hartwig says
June 13, 2015 at 1:35 pmUnfortunately, this is not responsive, but I just discovered this plugin that should help you with that: https://wordpress.org/plugins/responsive-image-maps/
The plugin gets good ratings, but I would love to hear if you try it out.