KODES
(@myklebustdesigns)
Anyone? Experiencing the same issue.
The image map is mostly tested in content where it has the whole width of the post to use. Columns is VC may be too dynamic for the image map to properly detect and handle. In general, it’s a bit tricky finding out the dimensions of the image that’s finally displayed to a user. All the hot spots need to be relatively placed to match those dimensions, so any dynamic readjustments that happen later in the render process may mess things up.
If anyone can figure out a fix, patches are accepted. 🙂
I’ve got the same issue.. simple fix:
go to
imagemapper.php
on line 763 to 774 just remove the line breaks (VC adds a nice for each new line..)
—-
<area
data-type="'.esc_attr($meta->type).'"
data-tooltip="'.esc_attr($meta->type == 'tooltip' ? $meta->tooltip_text : false ). '"
data-fill-color="'.esc_attr(str_replace('#', '', $color['fillColor'])).'"
data-fill-opacity="'.esc_attr($color['fillOpacity']).'"
data-stroke-color="'.esc_attr(str_replace('#', '', $color['strokeColor'])).'"
data-stroke-opacity="'.esc_attr($color['strokeOpacity']).'"
data-stroke-width="'.esc_attr($color['strokeWidth']).'"
data-mapkey="area-'.$id.'"
shape="poly" coords="'.esc_attr(get_post_meta($id, 'coords', true)).'"
href="'.esc_attr($link) .'"
title="'.(isset($meta->title_attribute) ? $meta->title_attribute : $title).'" />';
should be looking like this:
<area data-type="'.esc_attr($meta->type).'" data-tooltip="'.esc_attr($meta->type == 'tooltip' ? $meta->tooltip_text : false ). '" data-fill-color="'.esc_attr(str_replace('#', '', $color['fillColor'])).'" data-fill-opacity="'.esc_attr($color['fillOpacity']).'" data-stroke-color="'.esc_attr(str_replace('#', '', $color['strokeColor'])).'" data-stroke-opacity="'.esc_attr($color['strokeOpacity']).'" data-stroke-width="'.esc_attr($color['strokeWidth']).'" data-mapkey="area-'.$id.'" shape="poly" coords="'.esc_attr(get_post_meta($id, 'coords', true)).'" href="'.esc_attr($link) .'" title="'.(isset($meta->title_attribute) ? $meta->title_attribute : $title).'" />';
..bit more ugly but i works like a charm now
only thing is, that the images are scaled to 100% of the width of the column.. so i just put them in a div container with the original image width
hope it helps!
king regards
Benni
edit: for the “popup window” you might want to add at least
z-index:200 the the .imgmap-dialog-(class)
Thank, Benni! If others confirm that this fix does indeed work, I’ll make the changes into the plugin’s source code.
Where do i add the z-index:200?
Does that move the popup window? Right now mine is to low on the page. Centered over the image map? I’d rather have the popup be aligned to the top of my image map.
Possible?
Gary
Benni’s suggested change has been included in 1.2.3.
