html: кэширование изображений

интернет html JavaScript

Есть меню, сделанное в виде графических кнопок. onhover и onclick - по наведению и по нажатию - изображения заменяются похожими, но отличающимися. Соответственно, пользователь в течение какой-то доли секунды смотрит на значок незагруженной картинки (файлы сами небольшие, по паре килобайт). А если пользователь зайдет на сайт, потом отключит интернет и начнет тыкать по кнопкам - вообще плохо получится.
Как заставить браузер пользователи загрузить все подменные (отличающиеся) файлы кнопок при загрузки страницы? Решение "прописать их в угол с размером 0" мне не нравится совершенно.

Примечание:
a.iyfest {
background: url('images/portfolio/thumb/larger/fest.jpg');
background-color:#000;
border:2px solid #fff;
display: block;
width: 120px;
height: 120px;
margin:10px;
}

a.iyfest:hover {
background-position:
0
-120px;
}


Да, решение симпатичное. Пусть не самое простое в реализации.

Примечание:
Но, кстати, оно дает нам только ховер, а обработать так онклик не получится.

А кэширование - если одна картинка встречается на странице дважды, так она первый раз загрузится и второй раз будет взята уже из кэша браузера в 99.9% случаев. Но прописывать с нулевым размером не хочу - а ну как в очередной поделке от MS атрибуты "размер" тэга <img> будут игнорироваться, скажем, или еще какая фигня случится? Может быть, можно как-то на жабоскрипт перевесить функцию загрузить изображения?

Примечание:
У меня сейчас картинки выводятся в таком виде (извините за РНР, могу показать и HTML :)

echo "<li><a href=\"./gallery?vol=$row[0]\" onMouseOver=\"document.pic$row[0].src='pictures/$veil.png'\" onMouseOut=\"document.pic$row[0].src='pictures/$row[2].png'\"><img src=\"pictures/$row[2].png\" alt=\"$row[1]\" title=\"$row[1]\"border=0 height=\"50\" width=\"240\" name=\"pic$row[0]\">"."</a></li>";
Ответы:
Кнопку одним изображением сделать и при наведении сдвигать ее. Т.е. два изображения - до нажатия и после нажатия - расположить их друг под другом и при наведении позицию показываемого изображения енять. Делается в css
pixeline.ru тут так сделано...
И кэширование - это еще и настройка браузера насколько знаю.
Ты это реально наблюдал, или ты это теоретически так рассуждаешь. Просто я в инете, такого эффекта, ещё ни разу не наблюдал.
li.menu_1 { background-image: url('images/menu_blue_mark.jpg'); background-position:0 0; background-repeat: no-repeat; display: inline; margin-right: 30px; margin-left: 50px; padding-bottom: 1px; padding-left:20px; }
li.menu_1:hover { background-position:0 -13px;}
Система наведения, а ты знаеш ькак везде сделано это?
Вот тут в принципе написано как это сделать на JS, но я бы делал на CSS как посоветовал Delfi.
"Да, решение симпатичное. Пусть не самое простое в реализации."
Не сказал бы что не простое. Картинка подгружается сразу, что уже хорошо и выполняет поставленные условия. Новая картинка не подгружается, поэтому не нао ждать загрузки прин аведении
platon.xxl, с учетом, что js может кто не пользует. Хотя думаю даже если так, то при наведении просто ничег оне произойдет
Delfi, да знаю.
Можно стили для ховер и для какого нибудь класса прописать одинаковые свойста, типа позиционирование картинки-бекграунда, так называемый спрайт, как уже тут говорилось. А на сам онклик повесить назначение элементу того самого класса. Тогда js будет подключаться только при клике. а наведение отработает hover. При отключенном js самый оптимальный вариант.
Очем вообще речь, вам вообще тут не нужне JS.
    echo "<li><a href=\"./gallery?vol=$row[0]\"  onMouseOver=\"document.pic$row[0].src='pictures/$veil.png'\" onMouseOut=\"document.pic$row[0].src='pictures/$row[2].png'\"><img src=\"pictures/$row[2].png\" alt=\"$row[1]\" title=\"$row[1]\"border=0 height=\"50\" width=\"240\" name=\"pic$row[0]\">"."</a></li>";


16 лет назад

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.