Кнопки подгружаются после наведения мыши

[asat]

Добрый день.

Подскажите пожалуйста, в моем сайтекнопки сделаны следующим образом:

<a href="about.html"
onmouseover="document.about.src=&#39;about_on.gif& #39;;"
onmouseout="document.about.src=&#39;about.gif&#39; ;">
[img]about.gif[/img]</a>
То есть сначала кнопка - одно изображение, при подведениии мыша - другое

Так вот, при загрузке страницы грузится сначала только первая картинка (about.gif), а вторая картинка (abouit_on.gif) подгружается только после наведении мыша на ссылку, даже если основная страница уже загрузилась.

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

[Live]

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

var pic=new Array("about_on.gif", "остальные картинки, которые учавствую в ролловере")
var ima=new Array();
****for(var i=0;i<pic.length;i++)
****{
 *ima[i]=new Image(размер в пикселах, через запятую);
 *ima[i].src=pic[i];
****}

а на mouseover вызываешь src, но уже из этого массива по номеру... пример:

<a href="about.html" 
onmouseover="document.about.src=ima[0].src;" 
onmouseout="document.about.src=&#39;about.gif&#39;;">

т.е. ima[0].src - это первая картинка в массиве, а именно - about_on.gif

[asat]

Спасибо, live
Но картинки все одной ширины, но разной длины
Для каждой сделать массив получится?

[Live]

ну получается, что так... это у тебя в массиве получится по 1 картинке?
смысл вообще в чем - загнать картинку в кэш, чтобы они не подгружалась.
в твоем случае картинок не много, да? 4-5 штук? а если их подгрузить в начале страницы, но в невидимый слой, тогда они будут в кэше браузера, но не видны... попробуй в общем : ) если не заработает, то сделай для каждой картинки массив... массивы точно под ИЕ и Лисой работают.

[asat]

В продолжении темы: если перейти по ссылке через такую кнопку, а потом нажать НАЗАД в браузере, тоо страница загружается обратно с уже активированной кнопкой, через которую перешел
то есть если в предыдущем примере я перешел через кнопку about.gif на страницу about.html, то, нажав НАЗАД, на странице отображается about_on.gif и не реагирует на мышку, хотя остальные кнопки на странице работают как надо
Может знаете, что за глюк
Насчет массивов поробую, что получится, расскажу
А под Оперу такие вещи работают?

[agat]

Ууу.... как всё запущеннооо...

А я делаю так:

<a class="knopka">button</a>

================================

****.knopka {
 *display: block;
 *text-indent: -9999px;
 *text-decoration: none;
 *width: 84px;
 *height: 156px;
 *background: url(i/navigation.jpg) no-repeat;
****}
 *
 *.knopka:hover { background-position: 0 -156px; }

В i/navigation.jpg храниться 2 изображения кнопки, при наведении мыши оно сдвигается и показывает hover картинку, как убираем мышь, бэкграунд возвращается в своё обычное положение.

[Live]

а если в ролловере учавствую 3-4 изображения? например - еще одно изображение при нажатии мыши? или посещенная ссылка? или ссылка в фокусе? с учетом того, что ты написал ЦСС только для одной кнопки, то скрипт JS на 5 строк более логичен и уместен.

[agat]

Выдержка из w3.org:

a:link * *{ color: red } * */* unvisited links */
a:visited { color: blue } * /* visited links * */
a:hover * { color: yellow } /* user hovers * * */
a:active *{ color: lime } * /* active links * **/

Вот вам и бэки для всех поведений....

[Live]

ну и? я в курсе, что такое псевдоклассы...
просто если на странице будет 4-5 ролловеров с 3мя изображениями, то твой ЦСС файл вырастет страшным образом.
твой способ изящный и интересный, но подходит не под каждый случай.

[asat]

решил начать с совета Live
с одним массивом разобрался, одну кнопку закешировать получилось без проблем
но сделать несколько массивов не получается, помогайте
напишите хотя бы пример второго массива
я пробовал по аналогии - не получается, не грузится ни первый массив, ни второй

[Live]

к стати к твоему случаю больше способ agat&#39;a подходит.
ну а если хочешь массивами, то покажи код, который ты написал.

[asat]

я в java вообще не понимаю, поэтому помогайте, пожалуйста!!
вотт код, который я вставил в head

<head> <script LANGUAGE="JavaScript">
****<!--
****var pic=new Array("about_on.gif")
var ima=new Array();
for(var i=0;i<pic.length;i++)
{
 ima[i]=new Image(180, 38);
 ima[i].src=pic[i];
}
-->

это массив для первой кнопки
а вот массив для второй кнопки:

<head> <script LANGUAGE="JavaScript">
****<!--
****var pic=new Array("hist_on.gif")
var ima=new Array();
for(var i=1;i<pic.length;i++)
{
 ima[i]=new Image(107, 38);
 ima[i].src=pic[i];
}
-->

а вот код в body для первой кнопки about

<a href="about.html" 
onmouseover="document.about.src=ima[0].src;" 
onmouseout="document.about.src=&#39;about.gif&#39;;">
****[img]about.gif[/img]</a>

а вот вторая кнопка history

<a href="hist.html" 
onmouseover="document.hist.src=ima[1].src;" 
onmouseout="document.hist.src=&#39;hist.gif&#39;;">
[img]hist.gif[/img]</a>

Я по аналогии заменил во втором массиве i с 0 на 1
и похоже не угадал?
Жду комментариев
Только сильно не ругайтесь, я же только учусь

[Live]

var pic=new Array("about_on.gif")
var ima=new Array();
for(var i=0;i<pic.length;i++)
{
ima[i]=new Image(180, 38);
ima[i].src=pic[i];


var pic2=new Array("hist_on.gif")
var ima2=new Array();
for(var i=1;i<pic2.length;i++)
{
ima2[i]=new Image(107, 38);
ima2[i].src=pic[i];
}

в коде ima и pic - это названия переменных. ты можешь их назвать, как угодно (ну по правилам, которыми можно называть переменные). пример выше будет работать.
В хтмл уже работаем с двумя массивами, причем вид записи можно немножко упростит:

<a href="about.html" 
onmouseover="this.src=ima[0].src;" 
onmouseout="this.src=&#39;about.gif&#39;;">
[img]about.gif[/img]</a>

<a href="hist.html" 
onmouseover="this.src=ima2[0].src;" 
onmouseout="this.src=&#39;hist.gif&#39;;">
[img]hist.gif[/img]</a>

[asat]

Live, сделал так как Вы сказали
Всё работает!!!
Спасибо!
для интереса хочу научится делать способом agat&#39;a
что получится, расскажу

[Live]

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