|
| |
|
|
| |
для: HoUsE_zlat
(06.12.2008 в 14:48)
| | |
<html>
<head>
<script>
var BONT = 0;
function bont () {if (++BONT == 5) document.images.menu_index.style.visibility = 'visible'}
</script>
</head>
<body>
<img src="http://pk-kompressor.ru/i/menu_in.jpg" alt="Навигация" height="497" name="menu_index" style="border: none; visibility: hidden" usemap="#map" width="490" onload="bont ()" />
<map name="map">
<area alt="Закладка 1" coords="125,102, 227,7, 225,0, 285,7, 381,102, 253,229" href="../index/?firm=1" onMouseOut="document.images.menu_index.src='http://pk-kompressor.ru/i/menu_in.jpg';" onMouseOver="document.images.menu_index.src='http://pk-kompressor.ru/i/menu1_in.jpg';" shape="poly" />
<area alt="Закладка 2" coords="382,103, 479,201, 485,229, 479,251, 379,357, 253,225" href="../index/?firm=2" onMouseOut="document.images.menu_index.src='http://pk-kompressor.ru/i/menu_in.jpg';" onMouseOver="document.images.menu_index.src='http://pk-kompressor.ru/i/menu2_in.jpg';" shape="poly" />
<area alt="Закладка 3" coords="253,232, 379,353, 281,455, 253,462, 221,455, 135,360" href="../index/?firm=3" onMouseOut="document.images.menu_index.src='http://pk-kompressor.ru/i/menu_in.jpg';" onMouseOver="document.images.menu_index.src='http://pk-kompressor.ru/i/menu3_in.jpg';" shape="poly" />
<area alt="Закладка 4" coords="124,359, 33,268, 21,323, 33,197, 126,103, 251,225" href="../index/?firm=4" onMouseOut="document.images.menu_index.src='http://pk-kompressor.ru/i/menu_in.jpg';" onMouseOver="document.images.menu_index.src='http://pk-kompressor.ru/i/menu4_in.jpg';" shape="poly" />
</map>
<div style="display: none">
<img src="http://pk-kompressor.ru/i/menu1_in.jpg" onload="bont ()">
<img src="http://pk-kompressor.ru/i/menu2_in.jpg" onload="bont ()">
<img src="http://pk-kompressor.ru/i/menu3_in.jpg" onload="bont ()">
<img src="http://pk-kompressor.ru/i/menu4_in.jpg" onload="bont ()">
</div>
</body>
</html>
|
PS1. border: 0 в стилях - это не очень грамотно.
Надо border: none
PS2. document.имя_объекта - это тоже неграмотно.
Надо или document.getElementsByName ('имя_объекта') [0],
или как в коде - document.images.имя_объекта
PS3. Невидимый контейнер <div style="display: none"> (с картинками внутри)
размещать можно в любом месте документа,
но обязательно ПОСЛЕ тега <IMG> с name="menu_index"
PS4. Прямые пути к картинкам указаны исключительно для того,
чтобы вы смогли проверить работоспособность кода сразу, AS IS. | |
| |
|
|
| |
|
|
| |
для: HoUsE_zlat
(06.12.2008 в 14:48)
| | | На мой взгляд эффективнее сделать прелоад на CSS. Читаем здесь | |
| |
|
|
| |
 261.4 Кб |
|
| | Прошу помощи у знатоков 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
Прощу помощи всех, кто может хоть чем-нибудь помочь. | |
| |
|
| |
|
