Help! Onmouseover - IE перезагружает картинки

12
-AlexK-
На сайте с 10.04.2006
Offline
21
2760

Здравствуйте!

Проблема такая. Есть меню в котором при наведении мыши должен отображаться бэкграунд (размер не фиксированный):

onmouseover="this.parentElement.style.background='url(images/bg.gif)'" 

При наведении указателя мыши на ссылку, IE 6.0 (в отличии от Оперы) начинает качать картинку и в результате получается раздражающая задержка в 1-2 секунды. Ни предварительная загрузка картинки, ни картинка в невидимом div'e не помогают. Есть ли какие-то другие пути? Может кто сталкивался с подобной проблемой?

"Останься... в живых"
СКОРПИОН
На сайте с 05.01.2006
Offline
120
#1

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

• Контекстные ссылки с внутренних страниц навсегда (/ru/forum/370882) • Качественные сайты для заработка на контекстной рекламе и ссылках
-AlexK-
На сайте с 10.04.2006
Offline
21
#2

СКОРПИОН, Ан нет! Не получается. Грузил уже и менял... бесполезно

Ayavryk
На сайте с 11.10.2003
Offline
209
#3

Совместите обе картинки в одной и по Onmouseover меняйте не фон, а background-position

Кстати, если это ссылка, то можно вообше можно упаковать в CSS без JS.

Должно получиться.

Тынгыр, мынгыр, комсомол (http://erum.ru). Ехари, ехари, (жалобно) аяврик. /народная тунгусская песня/
[Удален]
#4
-AlexK-:
СКОРПИОН, Ан нет! Не получается. Грузил уже и менял... бесполезно

Код в студию. Как грузили, как меняли... Посмотрим.

zhitov
На сайте с 30.01.2005
Offline
219
#5
-AlexK-:
Ни предварительная загрузка картинки, ни картинка в невидимом div'e не помогают. Есть ли какие-то другие пути?

iframe 1х1 не пробовали? Где-то читал, что используется. Правда сам не пробовал.

А вот Ayavryk интересное предложил, надо попробовать.

Строительные калькуляторы ( https://www.zhitov.com/ )
Varkolak
На сайте с 03.06.2005
Offline
174
#6

Вот здесь http://skypeline.ru/01/ (ссылки слева) пример того про что сказал Ayavryk

html/css/js верстка и разработка сайтов на hostcms (хостцмс) - skype: varkolak1, тел: 89675012935, e-mail: anton.yurzanov@gmail.com
Ёжик В Тумане
На сайте с 26.07.2006
Offline
16
#7

Вообще лучше делать так:

В CSS:


#menu a{background-image: url("/images/a.gif");}
#menu a:hover{background-image: url("/images/a-hover.gif");}


<div id="menu">
<a href="page.html"><img src="/images/transparent.gif"></a>
</div>

transparent.gif - это прозрачная GIF картинка. При наведении на ссылку картинки будут меняться.

Если обязательно надо использовать JS, то осуществляйте предварительную загрузку картинки, тогда и подгружаться она не будет.

Ушел в себя, забыл про форум.
Вернусь ли? Не знаю... Если нужен, пишите в аську...
Mmonger
На сайте с 01.12.2005
Offline
165
#8
Ёжик В Тумане:
Если обязательно надо использовать JS, то осуществляйте предварительную загрузку картинки, тогда и подгружаться она не будет.

В том-то и проблема, что будет, даже несмотря на прелоад из JS.

Всё будет хорошо, но мы приложим усилия!
-AlexK-
На сайте с 10.04.2006
Offline
21
#9

Ayavryk, не получается.

javadf, вот пример кода (глюк в IE 6.0)

<style type='text/css'>

.over {background-image: url(images/hover.gif); background-position: 0 0;}
.out {background-image: url(images/hover.gif); background-repeat: no-repeat; background-position: 0 -37;}
</style>
<TD id="td1" class="out"><A class="item1" onmouseover="this.parentElement.className='over'; this.className='item2'" href="#">Пункт1</A></TD>
<TD id="td2" class="out"><A class="item1" onmouseover="this.parentElement.className='over'; this.className='item2'" href="#">Пункт2</A></TD>

До этого пробовал делать предзагрузку

bg = new Image(); 

bg.src = "images/hover.gif";
function over()
{
td2.style.background = "url("+bg.src+")";
}

+

<TD id="td2" class="out"><A class="item1" onmouseover="over(); this.className='item2'" href="#">Пункт2</A></TD>
Ayavryk
На сайте с 11.10.2003
Offline
209
#10
-AlexK-:
Ayavryk, не получается.

Посмотрите три варианта на выбор: http://1.x9.ru/1/

Рекомендую последний. Единственная проблема - растяжка на 100% в IE. Но она имеет решение.

-AlexK-:
До этого пробовал делать предзагрузку

в данном случае предзагрузка не нужна - лишний элемент, лишние скрипты.

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий