Плагин JQuery Cycle и CSS Sprite - в Opera не зарегистрировано ни одного зависания - PullRequest
Новая
       2

Плагин JQuery Cycle и CSS Sprite - в Opera не зарегистрировано ни одного зависания

1 голос
/ 14 июля 2010

Использование плагина JQuery Cycle для создания вращающегося фона.Также используется Blueprint для CSS

Изображения находятся в абсолютно позиционированном z-индексе DIV: 1.Другой абсолютно позиционированный DIV расположен прямо над ним с z-индексом: 999.

В верхнем DIV находится CSS Sprite Menu.

Спрайтовое меню работает с каждым протестированным браузером, FF3.6, IE8 / 7/6, Chrome, Safari ... ноотсутствует в Opera 10.6

Меню четко отображается и не блокируется вращающимися фоновыми изображениями, но при наведении курсора не происходит.Кроме того, когда я использую «inspect element» и hover, он работает правильно, после того, как я отключаю «Find Element by Clicking», он возвращается к тому, что не регистрируется.так как похоже, что плагин Jquery Cycle изменяет z-индексы изображений, но он поднимается только до z-index: 6 ... так что я потерян.

Ссылка на сайт

Суть CSS 

#background-images {
   width:950px;
   height:515px;
   position:absolute;
   top:0; left:0;
   z-index:1;
   }

#absolute-overlay {
   position:absolute;
   top:0; left:0;
   z-index:998;
   }

#relative-overlay {
   position:relative;
   width:950px;
   height:515px;
   }

#navbar {
   width:410px;
   height:279px;
   background:url(../images/savvier/menu-sprite.png);
   padding:0;
   position:relative;
   float:right;
   clear:both;
   }

Суть HTML 

<div id="background-images">
<div class="slideshow">
<img src="images/savvier/rotate/rotate_1.jpg" width="950" height="515" />
<img src="images/savvier/rotate/rotate_2.jpg" width="950" height="515" style="display:none;" />
<img src="images/savvier/rotate/rotate_3.jpg" width="950" height="515" style="display:none;" />
<img src="images/savvier/rotate/rotate_4.jpg" width="950" height="515" style="display:none;" />
<img src="images/savvier/rotate/rotate_5.jpg" width="950" height="515" style="display:none;" />
<img src="images/savvier/rotate/rotate_6.jpg" width="950" height="515" style="display:none;" />
</div>
</div>

<div class="span-24" id="absolute-overlay"><div id="relative-overlay">
<div class="logo"><img src="images/savvier/logo.png" alt="Flirty Girl Fitness&trade;" /></div>
<ul id="navbar">
<li id="menu-chicago"><a href="http://chicago.flirtygirlfitness.com/chicago_html/"></a></li>
    <li id="menu-toronto"><a href="http://toronto.flirtygirlfitness.com/toronto_html/"></a></li>
    <li id="menu-activewear"><a href="http://www.flirtygirlactivewear.com/"></a></li>
    <li id="menu-instructor"><a href="http://www.flirtification.com/"></a></li>
    <li id="menu-findclass"><a href="http://www.flirtification.com/find-class.asp"></a></li>
    <li id="menu-tv"><a href="http://flirtygirlfit.com/"></a></li>
</ul>
</div></div>

1 Ответ

1 голос
/ 19 июля 2010

Что ж, это способ сделать это, которого я никогда раньше не видел - вы создаете совершенно пустые теги A и аккуратно размещаете их поверх другого несвязанного изображения, чтобы создать иллюзию, что у вас есть «нажимаемые» кнопки.

Сначала я объясню, почему Opera не справляется с этим, дам вам быстрый обходной путь - а затем скажу несколько слов о том, почему вы можете подумать о том, чтобы делать что-то по-другому ..

Opera не обнаруживает никаких действий мыши, потому что при некоторых обстоятельствах пытается игнорировать действия мыши над пустыми элементами (в случае, если пользователь фактически пытается щелкнуть что-то «за» этими пустыми элементами). Здесь мы пытаемся скопировать то, что делает IE - по-видимому, недостаточно точно, поскольку IE работает и Opera не работает, даже когда я удаляю ваши условные комментарии и специфическую для IE таблицу стилей.

Быстрый (и хакерский) обходной путь - убедиться, что Opera заставляет думать, что действия мыши, направленные на пустые элементы A, значительны. Например, это должен быть безобидный способ справиться с этим: 

<script>if(document.addEventListener)document.addEventListener('mouseover', function(){}, true)</script>

Это добавляет один простой приемник при наведении курсора мыши, который срабатывает при наведении курсора на что угодно, включая невидимые пустые ссылки. За исключением использования небольшого количества дополнительного процессора, он абсолютно ничего не сделает, но Opera заметит, что что-то пытается наблюдать взаимодействие мыши, и элементы станут интерактивными.

Теперь код, который вы развернули, на мой взгляд, не лучший способ сделать это. Причина в том, что он не так доступен, как другие способы сделать то же самое - ни для вспомогательных технологий, ни для браузеров, которые переформатируют страницу из-за маленьких экранов или пользовательских предпочтений. Ваши ссылки не имеют абсолютно никакой информации, кроме URL - нет текста ссылки, ничего. Поскольку они относятся к одному изображению, вы также не можете дать каждой кнопке отдельный альтернативный текст.

Мое предложение будет использовать вместо этого карту изображений (HTML-элемент MAP) с соответствующими атрибутами ALT = "" и / или TITLE = "" для областей. Это способ сделать это, что должны понимать как вспомогательные технологии, так и браузеры, которым необходимо изменить предполагаемый макет вашей страницы.

...