Jump to content
  • 0

Загрузка картинок до их отображения


HoUsE
 Share

Question

Прошу помощи у знатоков java-script’а.

На главной странице сайта http://pk-kompressor.ru пользователю предлагается выбрать одну из четырёх фирм производителей.

При наведении курсора мыши на любую из логотипов четырёх этих фирм, происходит событие onMouseOver, сменяющее эту картинку на другую.

По идеи, при наведении и убирании курсора мыши на(с) логотип(а), должен получиться эффект «нажимания кнопки».

НО, этот эффект не похож, потому что когда происходит событие onMouseOver, картинка которая должна отобразиться сразу мгновенно, только начитает загружаться из Интернета. А так как её размер около 50 Кбайт, возникает пауза на одну или несколько секунд.

Мне нужен скрипт, чтобы сначала загружались все картинки (i/menu_in.jpg, i/menu1_in.jpg, i/menu2_in.jpg, i/menu3_in.jpg, i/menu4_in.jpg), и только после этого отображалось меню для выбора фирмы-производителя. Только тогда получиться тот самый эффект «нажимания кнопки», который требуется заказчику.

Для удобства, я сделал копию верстки, удалив в ней всё ненужное и выложил для скачивания - http://pk-kompressor.ru/upload/index.zip

Прощу помощи всех, кто может хоть чем-нибудь помочь.

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

Могу предложить следующее:

<div id="on" style="z-index: 2; position: absolute; top: 0px; left: 0px; width: 100px; height: 100px; background-color: #ff0000; display: block" onMouseOver="var thisDiv=document.getElementById('on'); thisDiv.style.display='none'" onMouseOut="var thisDiv=document.getElementById('on'); thisDiv.style.display='block'">
</div>

<div style="z-index: 1; position: absolute; top: 0px; left: 0px; width: 100px; height: 100px; background-color: #0000ff;" onMouseOver="var thisDiv=document.getElementById('on'); thisDiv.style.display='none'" onMouseOut="var thisDiv=document.getElementById('on'); thisDiv.style.display='block'">
</div>

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

Link to comment
Share on other sites

  • 0
Veseloff, спасибо!

Но здесь это не очень подходит, потому что вертка выполнена картами (map).

И очень сложно сюда Ваш способ применить.

Скриптов прелоадинга картинок в интернете полно.

Гугль уже не ищет?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy