Plugin Directory

Test out the new Plugin Directory and let us know what you think.

Gwyn's Imagemap Selector

Uses shortcodes to display imagemaps with categories of posts.

I only get the first 10 posts retrieved, but I have more than 10 areas in my imagemap

Just add nopaging=true to your [imagemap] tag. By default, WordPress will respect the post limit set on Reading Settings > Blog pages show at most (which is 10 by default).

Queries fail when using multiple parameters with &

This is because WordPress will pretty much encode all characters safely before saving an article. An attempt has been made to deal with the encoded ampersands, but it will only work with PHP 5.1.0 or greater (if you're using an earlier version of PHP, you should be upgrading it anyway!).

I want to have a series of blog articles displayed in a very specific, strict order inside the imagemap. How do I manage that?

  1. Make sure that all their dates are correctly set in sequence, since the default order is by date (you can then specify ascending or descending, whatever is appropriate).
  2. If you wish to keep the date but change the order, you have another option. You can add a Custom Field, say, Position (to add custom fields to any post under WP 3.1+, you need to click on the Screen Options dropdown and check that option). Then fill up this field with the order you wish (1 for the first post, 2 for the second, and so forth. It's fine to skip numbers and/or have the same number twice, WP will still return the correct order).

Then use the following syntax on the [imagemap] tag:

[imagemap query="cat=4&meta_key=Position&orderby=meta_value_num&nopaging=true&order=ASC"]

The number for the category is of course the one used to classify your articles (you can add multiple categories there, too, separated by a comma).

I don't want the image to show its id name while hovering outside of any area

This yellow popup is browser-dependent (but pretty much every browser today has implemented it). To fix it, since 0.3.2, you can leave the alt and/or title tags empty on the [imagemap] shortcode. Technically, leaving alt off is an HTML violation.

How do I edit a generated imagemap again?

Sorry, that's beyond my ability to do. The original source code for the imagemap creator has been done by Adam Maschek, not by me, and I have no idea how to change it to do just that. What I do is to simply copy & paste the existing coordinates on the top part (instead of re-selecting everything). This is a pain if you have many entries, but far better than doing everything from scratch again!

How to change the popup (restyling it to another colour, font, etc.) when a user hover over an area defined by the imagemap (**not** the Ajax hover function, the small yellow box)?

It's not possible. The small hovering popup is not created by the plugin at all: it's browser-dependent. Remember, imagemaps are ancient HTML features, they predate Javascript and even CSS by many years. What all modern browsers do is to read the alt/title tags and generate this "fake" popup (which is built-in into the browser), but there is no control about how it's styled.

If you really want to change that popup, you will need to use a Javascript/Flash/Java-based plugin instead. There are a few available. This plugin avoids Javascript/Flash/Java on the frontend — deliberately so, for those few browsers which have Javascript/Flash/Java turned off. HTML imagemaps will always work, since they are pure HTML. But, yes, they have their limitations!

Of course, the Ajax hover box can be fully styled from the Settings tab.

Requires: 3.0 or higher
Compatible up to: 4.5.4
Last Updated: 9 months ago
Active Installs: 900+


2.3 out of 5 stars


Got something to say? Need help?


Not enough data

0 people say it works.
0 people say it's broken.

100,1,1 100,1,1 100,1,1 100,1,1 0,1,0
100,1,1 100,2,2