I try to use iviewer to zoom and pan imagemapster, but can't get imagemapster to work when image is loaded through iviewer. Maybe it is impossible? The image url must be passed to iviewer as a parameter to iviewer function. I try to add classname and usemap='#map' to the image with jquery afterwords, so that imagemapster can access the image maps, but although the classname and usemap values are visible in the resulting html, imagemapster obviously can't access them, or somehow doesn't work.
$(document).ready(function() {
var iv1 = $("#image-container").iviewer({
src: "images/image.jpg",
update_on_resize: false,
zoom_animation: false,
mousewheel: false,
onMouseMove: function(ev, coords) { },
onDrag: function(ev, coords) { }
});
$('#image-container').attr({'class': 'basicmap','usemap': '#map'});
$('#image-container img').attr('id','kartstort_mapholder');
$('#kartstort_mapholder').mapster({
clickNavigate: true,
mapKey: 'omrade',
render_highlight: {
fillColor: 'ff0000',
fillOpacity: '0.3'
},
render_select: {
fillColor: 'ffcc00',
fillOpacity: '0.4'
},
areas: [{
key: 'parker',
render_select: {
fillColor: '74c300',
fillOpacity: '0.6'
}
},
{
key: 'plasser',
render_select: {
fillColor: '0099ff',
fillOpacity: '0.6'
}
}
]
});
Any hints on how to accomodate my goal here?