Location map hover blues
Hi everyone, I'm trying to get these hovers to work properly.
I was asked to come up with a map of the world that highlights when a user mouses over a particular area. Those ares are mapped with <map> and <area> tags, and I'm using jQuery to load <div>s that go on top of each of those areas. The problem is that the cursor loses focus when the obtrusive <div>'s display property is set to block by .show() or .fadeIn or whatever. If I use inline it disappears, also for inline-block. So it has to be block. When the cursor loses focus, it immediately hides the <div> with the rollover graphic.
What does work is using a sprite file and just doing an image swap. Unfortunately, I work for fools, and they don't want to use that method because they don't feel that architecturally, using sprites on such a large file size is such a good idea.
I'd like it to do what the user would expect - on mouseenter, stay on until the cursor leave the <area> map, not just by moving the cursor bit by bit.
The code:
Thanks,
Eugene
P.S. I know maphilight is a great plug-in, unfortunately, we have very precise coastlines and as I'm representing a geography-based company, we can't use the plug-in because it would take forever to get those coordinates to highlight correctly.
I was asked to come up with a map of the world that highlights when a user mouses over a particular area. Those ares are mapped with <map> and <area> tags, and I'm using jQuery to load <div>s that go on top of each of those areas. The problem is that the cursor loses focus when the obtrusive <div>'s display property is set to block by .show() or .fadeIn or whatever. If I use inline it disappears, also for inline-block. So it has to be block. When the cursor loses focus, it immediately hides the <div> with the rollover graphic.
What does work is using a sprite file and just doing an image swap. Unfortunately, I work for fools, and they don't want to use that method because they don't feel that architecturally, using sprites on such a large file size is such a good idea.
I'd like it to do what the user would expect - on mouseenter, stay on until the cursor leave the <area> map, not just by moving the cursor bit by bit.
The code:
- $(document).ready(function () {
$('#locationsMap area').each(function(i){
$(this).mouseenter(function () {
$("#"+($(this).attr('alt'))+"_h").show();
}).mouseout(function () {
$("#"+($(this).attr('alt'))+"_h").hide();
}); - });
Thanks,
Eugene
P.S. I know maphilight is a great plug-in, unfortunately, we have very precise coastlines and as I'm representing a geography-based company, we can't use the plug-in because it would take forever to get those coordinates to highlight correctly.
Topic Participants
ehourany
Kevin Boudloche