Hi there, I'll do my best to explain clearly. If this question has already been asked, I apologize as I couldn't find an answer when searching.
I've used SVG to create a map on my HTML webpage and it's looking great. I also have hidden divs that show information about each area of the map.
The goal is for information to display in a neighboring div when a user hovers over a section of the map. However, I'm having trouble with the divs not hiding again if the mouse skims over the map quickly.
Here is a snippet of my jQuery code:
$(document).ready(function(){
$townOneText = $('#town-one-info');
$infoText = $('#map-instructions');
$('body').on('mouseover', '#town-one', function () {
$infoText.hide();
$townOneText.fadeIn("slow");
});
$('body').on('mouseout', '#town-one', function () {
$townOneText.hide();
$infoText.fadeIn("slow");
});
$('body').on('click', '#town-one', function () {
window.open('http://www.townone.com.au');
});
});
If you'd like to see the live page, here's the link:
I admit I'm not proficient with jQuery, so any help would be greatly appreciated. I'd also like to make the code more efficient if possible (currently repeating the above for every area).
Thank you in advance for any assistance you can offer.