Карта изображений с наложением не работает в IE - PullRequest
Новая
       3

Карта изображений с наложением не работает в IE

1 голос
/ 19 августа 2011

Я пытаюсь создать интерактивную карту с наложением, используя карты изображений HTML. Чтобы увидеть это, пожалуйста, посетите: http://www.surge.ca/testing/WFA2100/index.html

Объяснение:

Когда вы наводите курсор мыши на <area> карты, она вызывает наложение со ссылками. Чтобы предотвратить наложение оверлея при его перемещении, поскольку вы больше не зависаете над областью, я использую setTimeout до того, как оно закроет оверлей.

Проблема:

Это работает так, как я хочу в любом браузере, кроме IE. В IE 7 и 8, когда вы наводите курсор на оверлей, который находится над другим <area>, он сразу переключается на оверлей этого <area>.

Сначала я подумал, что это проблема с z-индексом, когда z-индекс <area> был выше оверлея, но я думаю, что мой z-индекс настроен правильно. Я также думаю, что это может быть просто, как IE обрабатывает карты изображений?

Код:

Вот код, который устанавливает события. 

jQuery(function($){
    // binds mouseenter and mouseleave to <area>
    $('area').bind('mouseenter',function(){
        sectionNum = this.hash;
        sectionNum = sectionNum.replace(/#/,'');
        showOverlay(sectionNum);
        clearTimeout(timer);    
    }).bind('mouseleave', function(){
        timerClose();
    });

    $('.map_info').bind('mouseenter', function(){
        clearTimeout(timer);
    }).bind('mouseleave', function(){
        timerClose();
    });
});

// sets timer before closing to allow cancel
var timer;
function timerClose(){
    timer = setTimeout(function(){hideOverlay();},500);
}

1 Ответ

0 голосов
/ 19 августа 2011

Проблема в том, что IE сбрасывает setTimeout, когда зависание заканчивается.Я не запускал ваш код, но у меня возникла та же проблема, и cpuld решил ее, передав функцию setTimeout в виде строки.

Например, setTimeout(alert('hi'), 1000) не работал с функцией, которая выполняласьсостояние зависания, но setTimeout("alert('hi')", 1000) работал.Возможно, в вашем коде замена 

timer = setTimeout(function(){hideOverlay();},500);

на 

timer = setTimeout("function(){hideOverlay();}",500);

решит проблему.Кажется, IE запускает код, который передается в виде строки в глобальной области видимости.

Также я вижу, что на вашей странице есть jQuery.Существует плагин jQuery под названием hoverIntent , который очень хорошо задерживает зависание.Возможно, автор плагина написал больше кросс-браузерного кода.

Дайте мне знать, если это работает.:)

...