HTML+CSS+JavaScript

Всем привет)
У меня на сайте кнопки сделаны с помощью js, то-есть когда подводишь к кнопке мышку картинка меняется. И вот возникла проблема, когда подводишь мышку к кнопке, картинка меняется с небольшой задержкой, получается что-то вроде картинка_1-белый экран-картинка_2. То-есть как я понял, на момент нажатия кнопки картинка еще не загружена, а только начинает грузиться. Так вот вопрос заключается в том, что-бы сделать загрузку картинки до того, как нажата какая-то кнопка на сайте. Ну как-то так.

1. Все кнопки(картинки)-ролловеры делаете ИЗНАЧАЛЬНО невидимыми (style= "visibility: hidden")
2. Где-то на странице (в любом месте) прописываете <DIV style="display: none">
3. Внутрь этого <DIV>'a прописываете теги <IMG>, в которых в атрибутах SRC указываете пути ко всем картинкам, участвующим в ролловерах (т.е. к тем картинкам, которые появляются при наведении мыши)
4. На каждый тег <IMG> "вешаете" обработчик ONLOAD, вызывающий одну и ту же функцию, которая просто увеличивает какой-то изначально нулевой счётчик на единицу и проверяет - не достиг ли счётчик заданного числа картинок.
5. Как только счётчик дойдёт до заданного числа (и все картинки окажутся в кеше браузера) - делаете кнопки(картинки)-ролловеры видимыми (style= "visibility: visible") и на них клиент сможет нажимать.

Пример реализации см. http://www.softtime.ru/forum/read.php?id_forum=4&id_theme=60640

А как быть с тем, что js может быть отключен? тогда пользователь вовсе ничего не увидет

"А как быть с тем, что js может быть отключен? тогда пользователь вовсе ничего не увидет"

Такому пользователю надо выслать верёвку и кусок мыла - пусть повесится.

Всего лишь около 1 сотой процента всех пользователей выходят в сеть с отключёнными скриптами.
Т.е. ОДИН на ДЕСЯТЬ ТЫСЯЧ!
Стоит ли об этих идиотах волноваться?
Или к вам на сайт ходят исключительно идиоты?

"Такому пользователю надо выслать верёвку и кусок мыла - пусть повесится. "

С этим я полностью согласен)

"Всего лишь около 1 сотой процента всех пользователей выходят в сеть с отключёнными скриптами.
Т.е. ОДИН на ДЕСЯТЬ ТЫСЯЧ!"

Процент пользователей, которые отключают js - точно не известен, и на разных ресурсах приводят данные от 1 до 5 процента. А где-то видел вообще 10%. И я считаю, что код должен быть валидный, как с включенным js, так и без него.

"И я считаю, что код должен быть валидный, как с включенным js, так и без него."

Считать вы можете так, как вам будет угодно.
Только сначала разберитесь с понятием "валидность".

А то, знаете, можно вашу мысль продолжить и довести до полного абсурда. Например, так:

И я считаю, что код должен быть валидный, как с включенными СТИЛЯМИ, так и с ЛЮБЫМИ предустановленными стилями пользователя.

Или

И я считаю, что код должен быть валидный, как с включенным ОТОБРАЖЕНИЕМ РИСУНКОВ, так и при выключеннном.

Или

И я считаю, что код должен быть валидный, как с включенным КОМПЬЮТЕРОМ, так и ВОВСЕ без него.

Заметьте, что ни одно из моих высказываний НИЧЕМ НЕ ХУЖЕ (в смысле - НЕ ГЛУПЕЕ) чем ваше изначальное (про валидноcть и JS).

Я сюда не спорить пришел....

Я решил просто вставить <div style='visibility:hidden'>, и вложить туда картинки, которые должны меняться, но оно не работает, все-равно после загрузки страницы, картинки на onMouseOver загружаются с небольшой паузой! Может их можно как-то закэшировать?

"Я решил просто вставить <div style='visibility:hidden'>"

Вам пишут, что надо вставить <DIV STYLE="display: none">, но вы РЕШАЕТЕ вставить иное..
Тогда ЗАЧЕМ ВЫ ВООБЩЕ ЗДЕСЬ ЗАДАЁТЕ ВОПРОСЫ, товарищ РЕШАТЕЛЬ?

упс сори, я хотел написать <DIV STYLE="display: none">, думал одно написал другое... Я изначально тестил броузером google chrome, так вот в нем и не работает. Я думал в других броузерах аналогичный движок. А потом решил проверить, так вот в остальных вроде бы работает. Проверял в этих - opera, firefox, safari, netscape, IE.

не кнопки, а ссылки
http://e-lusion.com/design/menu/

ну в принципе у меня не ссылки и не кнопки, а что-то наподобие навигации, вот код:

<?php $result1=mysql_query("SELECT * FROM menu WHERE vid='main'",$bd);     $myrow1=mysql_fetch_array($result1); $i=0; do                                                     {     $i++;                                                     /*вывод названий категорий*/     echo "     <div id='main_menu".$myrow1['id']."' class='main_menu' onClick='menuclick(".$myrow1['id'].")'  onMouseOver='menuover(".$myrow1['id'].")' onMouseOut='menuout(".$myrow1['id'].")'> <img id='go".$myrow1['id']."' src='images/go.gif' border='0'> ".$myrow1['cat']."</div>";                                         /*проверка на включенность js - начало*/ print<<<here <script language='Javascript'> document.write("<ul id='look$myrow1[id]' class='look' style='display:none'>") here; echo "</script><noscript><ul id='look".$myrow1['id']."' class='look'></noscript>";                                         /*проверка на включенность js - конец*/                                              $result10=mysql_query("SELECT * FROM menu WHERE vid=".$myrow1['id']." ORDER BY cat",$bd);     $myrow10=mysql_fetch_array($result10);     do         {             echo "<li><a href='view_group.php?marka=".$myrow10['id']."'>".$myrow10['cat']."</a></li>";         }         while($myrow10=mysql_fetch_array($result10));         echo "</ul>";         }         while($myrow1=mysql_fetch_array($result1));

ну и js

function menuover(e)         {             if(document.getElementById("look"+e).style.display=="none")              {             document.getElementById("main_menu"+e).style.background = "url(images/main_menu_over.gif)";             }         }     function menuout(d)         {         if(document.getElementById("look"+d).style.display=="none")              {             document.getElementById("main_menu"+d).style.background = "url(images/main_menu.gif)";              }         }     function menuclick(c)         {         if(document.getElementById("look"+c).style.display=="none")              {             document.getElementById("main_menu"+c).style.background = "url(images/main_menu_click.gif)";             document.getElementById("look"+c).style.display = "";              document.getElementById("go"+c).src = ("images/go_click.gif");             }         else {             document.getElementById("main_menu"+c).style.background = "url(images/main_menu.gif)";             document.getElementById("look"+c).style.display = "none";              document.getElementById("go"+c).src = ("images/go.gif");             }         }

и в начале страницы вставляю

<div style="display:none">
<img src="images/main_menu_over.gif">
<img src="images/main_menu_click.gif">
</div>

посмотрите как работает пример. там все на одной фоновой картинке, а не на нескольких

у меня немного подругому сделано, то-есть на onMouseOver вставляется одна картина, а на onClick другая, то-есть у меня всего три фоновых картинки, которые меняются, и я уверен что дело не в этом... А там чуть выше написал, что этот вариант у меня работает в opera, firefox, safari, netscape, IE, а вот в google chrome не работает, хотя может это у меня комп тормозит, в-общем не знаю....

С google chrome помочь проблематично.
Товарищи из Гугля пока не удосужились выложить в сеть мануалы по JS для своего браузера.
Потому пока только "методом тыка".