Spike

Hey,

You need to add this code to the header template file of the theme you’re using:

<?php echo get_imgmap_frontend_image('86', '79467984'); ?>

86 is the ID of the image map and 79467984 is just a random ID for the HTML element.

Hi,

Currently there isn’t any existing feature for this. But if you’re familiar with WordPress development you can find them using following function:

get_post_meta([POST_ID], ‘coords’)

The coordinates are saved in post_meta in HTML image map coordinate format (“x1, y1, x2, y2, x3, y3” and so on).

If you are familiar with plugin development, it shouldn’t be too hard to write a plugin which allows you to do this.

And sorry for a late answer. :<

Hi,

Sorry for not replying earlier.

The problem with HTML image maps is that they use only absolute values for coordinates. If the size of the image is different the values will not match.

This is however fixed in ImageMapster, the jQuery plugin the ImageMapper uses. When images are resized, the browser will detect the change and calculate new values for every image area. Responsive Image Maps does the same.

However it seems that sometimes the change is not detected correctly. As I’m not the developer of ImageMapster nor Responsive Image Maps it’s hard to me to say where’s the problem.

There’s also another problem which may cause the bugs in image maps. The image map of ImageMapster consists of two images, an HTML5 canvas element and an HTML image map. Only one of the images are actually used to display the image. Canvas is used to draw highlights and other effects and the other image is a transparent layer which handles the mouse functionality with HTML image map set to it. The problem is that some WordPress themes resize the display image without resizing the canvas and the transparent image. All of the layers’ sizes have to be equal or the image maps won’t function properly.

Please check if the stylesheets of your themes have style definitions which may cause the images to be resized. Also any errors in Javascript console (can be found in browser settings) might be useful as well.

I hope this helps.

Hi

Sorry for a late answer, I’ve been quite busy recently. I watched your video and you had some good points there. Not removing “Add new image map area” link was a silly mistake of mine.

I actually have no idea why that stretching happens. It’s hard to reproduce the bug as well, so testing and fixing it isn’t quite simple. To fix the pop up window stretching try to use the other popup window layout. You can switch it in Image Map Settings.

Unfortunately I’ve got not much time for the plugin right now. The plugin is sure not very polished, but it was initially meant to “just get the work done”. Currently I’ve got no plans for a large update anytime soon. Thanks for making the video though, it helped a lot understanding the stretching problem.

Spike.

Hello,

I released a small update now that introduces an alternative layout for the popup window. After updating you can switch to the new layout in Image map settings page.

To be honest I’ve got no idea why the old layout didn’t work, but this update should fix it.

Spike

Good to hear that you got it working. The first option would have worked only if the stylesheet was applied after ImageMapper’s one, but it doesn’t really matter which one you use.

Hi,

If you’re able to edit your theme’s stylesheets, you can limit the popup width to 200px with this:

.imgmap-dialog {
max-width: 200px;
}

Or if that doesn’t work:

.imgmap-dialog {
max-width: 200px !important;
}

I hope that helps.

Spike

Hi,

I’m not exactly sure what you mean, but you can use get_posts and get_post_meta functions to access image maps and their data. Image maps are “imagemap” custom post type posts. Coordinates, the image and such data are saved as post meta data.