-
Добрый день.
Подскажите пожалуйста, в моем сайтекнопки сделаны следующим образом:
<a href="about.html"
onmouseover="document.about.src='about_on.gif& #39;;"
onmouseout="document.about.src='about.gif' ;">
[img]about.gif[/img]</a>
То есть сначала кнопка - одно изображение, при подведениии мыша - другое
Так вот, при загрузке страницы грузится сначала только первая картинка (about.gif), а вторая картинка (abouit_on.gif) подгружается только после наведении мыша на ссылку, даже если основная страница уже загрузилась.
Помогите, пожалуйста, сделать так, чтобы этот второй гиф грузился вместе с основной страницей.
-
нужно сделать "прелоадер" на 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='about.gif';">
т.е. ima[0].src - это первая картинка в массиве, а именно - about_on.gif
-
Спасибо, live
Но картинки все одной ширины, но разной длины
Для каждой сделать массив получится?
-
ну получается, что так... это у тебя в массиве получится по 1 картинке?
смысл вообще в чем - загнать картинку в кэш, чтобы они не подгружалась.
в твоем случае картинок не много, да? 4-5 штук? а если их подгрузить в начале страницы, но в невидимый слой, тогда они будут в кэше браузера, но не видны... попробуй в общем : ) если не заработает, то сделай для каждой картинки массив... массивы точно под ИЕ и Лисой работают.
-
В продолжении темы: если перейти по ссылке через такую кнопку, а потом нажать НАЗАД в браузере, тоо страница загружается обратно с уже активированной кнопкой, через которую перешел
то есть если в предыдущем примере я перешел через кнопку about.gif на страницу about.html, то, нажав НАЗАД, на странице отображается about_on.gif и не реагирует на мышку, хотя остальные кнопки на странице работают как надо
Может знаете, что за глюк
Насчет массивов поробую, что получится, расскажу
А под Оперу такие вещи работают?
-
Ууу.... как всё запущеннооо...
А я делаю так:
Код:
<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 картинку, как убираем мышь, бэкграунд возвращается в своё обычное положение.
-
а если в ролловере учавствую 3-4 изображения? например - еще одно изображение при нажатии мыши? или посещенная ссылка? или ссылка в фокусе? с учетом того, что ты написал ЦСС только для одной кнопки, то скрипт JS на 5 строк более логичен и уместен.
-
Выдержка из 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 * **/
Вот вам и бэки для всех поведений....
-
ну и? я в курсе, что такое псевдоклассы...
просто если на странице будет 4-5 ролловеров с 3мя изображениями, то твой ЦСС файл вырастет страшным образом.
твой способ изящный и интересный, но подходит не под каждый случай.
-
решил начать с совета Live
с одним массивом разобрался, одну кнопку закешировать получилось без проблем
но сделать несколько массивов не получается, помогайте
напишите хотя бы пример второго массива
я пробовал по аналогии - не получается, не грузится ни первый массив, ни второй
-
к стати к твоему случаю больше способ agat'a подходит.
ну а если хочешь массивами, то покажи код, который ты написал.
-
я в 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='about.gif';">
****[img]about.gif[/img]</a>
а вот вторая кнопка history
Код:
<a href="hist.html"
onmouseover="document.hist.src=ima[1].src;"
onmouseout="document.hist.src='hist.gif';">
[img]hist.gif[/img]</a>
Я по аналогии заменил во втором массиве i с 0 на 1
и похоже не угадал? [Only registered and activated users can see links. Click Here To Register...]
Жду комментариев
Только сильно не ругайтесь, я же только учусь
-
Код:
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='about.gif';">
[img]about.gif[/img]</a>
<a href="hist.html"
onmouseover="this.src=ima2[0].src;"
onmouseout="this.src='hist.gif';">
[img]hist.gif[/img]</a>
-
Live, сделал так как Вы сказали
Всё работает!!!
Спасибо!
для интереса хочу научится делать способом agat'a
что получится, расскажу
-
незачто!
способ агата - для небольшого кол-ва ролловеров, разных размеров картинок, для ролловеров с небольшим кол-вом картинок.
мой способ - рельно удобный для ролловеров в которых учавствуют большое кол-во картинок одинакового размера.
