Response title
This is preview!
Need help with hover issue on an html map
in Using jQuery
•
10 years ago
I'm trying to create a hover effect on a world map. It works ok (except for some small glitch I mention later) in both Chrome and Firefox. However it doesn't in IE, at least in IE8. The hover effect, replaced later with mouseenter/mouseleave getting the same results, creates an annoying blinking undesired effect.
As, you will check, I'm using an HTML map to trigger the events, and one transparent png (png-8 since png-24 looked awfully in IE) per continent, placed over its location on the map image, and initially hidden. When the mouse enters an area, its corresponding png is fade in just after all the png's are faded out.
Why is this happening in IE while it doesn't in FF/Chrome? and what could I do to fix it?
You can browse the involved code, which is in the same html document. Anyway I'm putting it here for clarity:
- var imgTag;
- $(document).ready(function() {
- imgTag = $('#mapamundi img');
- $('#mapamundi .area').each(function() {
- $(this).mouseenter(
- function() {
- var region = $('#mapamundi a#region-' + $(this).attr('id'));
- if (region.hasClass('oculto')) {
- $('#mapamundi a').hide('fast', function() {
- $(this).addClass('oculto');
- });
- $('#mapamundi a#region-' + $(this).attr('id')).fadeIn('fast', function() {
- $(this).removeClass('oculto');
- });
- }
- }).mouseleave(
- function() {
- var region = $('#mapamundi a#region-' + $(this).attr('id'));
- if (! region.hasClass('oculto')) {
- region.fadeOut('fast', function() {
- $(this).addClass('oculto');
- });
- }
- }
- );
- });
- });
This is the link:
It seems an easy process. There is something I'm doing wrong though.
Even in Chrome/FF I see that sometimes the mouseleave effect doesn't work as expected.
Please your help would be greatly appreciated.
1
