After thoroughly reviewing the documentation on Imagemapster's website and browsing several posts, I am still struggling to get the tooltips working correctly. I attempted to share my HTML and JS code on jsfiddle.com without success, so I have provided a link to a sample map here. Once the map is functioning as desired, I plan to implement the appropriate code into the actual project.
1) The hover effects are functioning properly, so that is not of concern.
2) There is a div below the map that should be hidden when the page loads, but it remains visible. When hovering over one of the hotspots, the text appears and the map works correctly thereafter. It seems like there may be something missing or incorrect in the code related to onMouseover and onMouseout events.
3) Is it possible to position the tooltips directly over the hotspots on the map, rather than within a div below? I would prefer the text to appear over the hotspots for better user experience.
Although I am proficient in CSS, I lack experience with JS, making it challenging for me to troubleshoot. This example was assembled from various samples I found while exploring Imagemapster. Any assistance in identifying what's wrong with the code or any recommended resources would be greatly appreciated.
Below is my current code:
var image = $('#map1');
$(document).ready(function () {
$('#map1').mapster({
singleSelect : true,
clickNavigate : false,
mapKey: 'color',
listKey: 'name',
fillColor: "ffffff",
fillOpacity : 0.5,
onMouseover: function (e) {
$('#myDiv').html(xref[e.key]);
},
onMouseout: function (e) {
if(!$(this).hasClass('clicked')) {
$('#myDiv').html('');
}
},
});
});