Как предварительно загрузить картинки в память, чтобы они грузились еще до того как наведешь на них. (картинки играют роль кнопок, которые при наведении меняются).
Как загнать скрипт <a href='http://www.woweb.ru/catalog/304/arch/009.zip' target='_blank'>http://www.woweb.ru/catalog/304/arch/009.zip</a> в отдельный js файл и как потом к нему обращаться?
Предварительная загрузка картинок
Сообщений: 6
• Страница 1 из 1
Gluek » Вт июн 08, 2004 2:41 pm
2DamNeR
Если в Dreamweaver делать, то "Preload Images" (Rollover image).
Добавлено:
Если в Dreamweaver делать, то "Preload Images" (Rollover image).
Добавлено:
- Код: выделить все
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" onLoad="MM_preloadImages('rollover.jpg')">
<a href="http://when_clicked_url.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','rollover.jpg',1)"><img name="Image1" border="0" src="original.jpg"></a>
</body>
</html>
<!--fonto:Tahoma--><span style="font-family:Tahoma"><!--/fonto--><!--sizeo:2--><span style="font-size:10pt;line-height:100%"><!--/sizeo-->Для контактов со мной пользуйтесь адресом mrgluek@gmail.com (e-mail & jabber).<!--sizec--></span><!--/sizec-->
Полезное в <a href="http://gluek.info/" target="_blank">моем блоге</a>: бесплатный <a href="http://gluek.info/free-files-hosting/" target="_blank">хостинг для файлов</a> и <a href="http://gluek.info/free-images-hosting/" target="_blank">для картинок</a>, бесплатные <a href="http://gluek.info/free-mp3-download/" target="_blank">сайты с музыкой</a>.<!--fontc--></span><!--/fontc-->
Полезное в <a href="http://gluek.info/" target="_blank">моем блоге</a>: бесплатный <a href="http://gluek.info/free-files-hosting/" target="_blank">хостинг для файлов</a> и <a href="http://gluek.info/free-images-hosting/" target="_blank">для картинок</a>, бесплатные <a href="http://gluek.info/free-mp3-download/" target="_blank">сайты с музыкой</a>.<!--fontc--></span><!--/fontc-->
- Gluek
- Генерал-лейтенант
- Сообщений: 3107
- Зарегистрирован: Пн янв 06, 2003 6:24 am
- Откуда: Россия/Москва
- Пункты репутации: 0
Ciber SLasH » Ср июн 09, 2004 3:14 am
2DamNeR:
Вот скрипт:
ButtonEvent.js:
Вот html-ка, здесь же и пример загрузки скрипта из файла:
Вот скрипт:
ButtonEvent.js:
- Код: выделить все
var objCount = 0;
var pics = new Array();
function preload(name, Passive, Active, Pushed) {
pics[objCount] = new Array(4);
pics[objCount][0] = new Image();
pics[objCount][0].src = Passive;
pics[objCount][1] = new Image();
pics[objCount][1].src = Active;
pics[objCount][2] = new Image();
pics[objCount][2].src = Pushed;
pics[objCount][3] = name;
objCount++
}
function MouseEnter(name) {
for (i = 0; i < objCount; i++) { // обходим все кнопки
if (document.images[pics[i][3]] != null) // если кнопка существует, то
if (name != pics[i][3]) // если name <> имени i-кнопки, то
// устанавливаем "пассивное" состояние для i-кнопки
document.images[pics[i][3]].src = pics[i][0].src
else
// устанавливаем "активное" состояние для i-кнопки
document.images[pics[i][3]].src = pics[i][1].src
}
}
function MouseDown(name) {
for (i = 0; i < objCount; i++) { // обходим все кнопки
if (document.images[pics[i][3]] != null) // если кнопка существует, то
if (name == pics[i][3]) // если name = имени i-кнопки, то
// устанавливаем "нажатое" состояние для i-кнопки
document.images[pics[i][3]].src = pics[i][2].src
}
}
function MouseLeave() {
for (i = 0; i < objCount; i++) {
if (document.images[pics[i][3]] != null) // если кнопка существует, то
// устанавливаем "пассивное" состояние для i-кнопки
document.images[pics[i][3]].src = pics[i][0].src
}
}
Вот html-ка, здесь же и пример загрузки скрипта из файла:
- Код: выделить все
<html>
<head>
<script language='JavaScript' src='ButtonEvent.js'></script>
<script language='JavaScript'>
preload('Banner', 'BannerPassive.gif', 'BannerActive.gif', 'BannerPushed.gif')
</script>
</head>
<body>
<a href="" onMouseOver=MouseEnter('Banner') onMouseOut=MouseLeave() onMouseDown=MouseDown('Banner')><img name="Banner" src="BannerPassive.gif" width=88 height=31 border=0></a>
</body>
</html>
Последний раз редактировалось Ciber SLasH Ср июн 09, 2004 3:17 am, всего редактировалось 1 раз.
- Ciber SLasH
- Майор
- Сообщений: 314
- Зарегистрирован: Пн ноя 24, 2003 11:28 am
- Откуда: Питер
- Пункты репутации: 0
Piloan » Ср июн 09, 2004 3:28 am
Эффект перекатывания или rollover
Эффектом перекатывания или Rollover называют замену одного изображения другим при наведении на него курсора мыши. Наводим мышь на рисунок, он меняется на другой, уводим мышь, рисунок становится прежним.
Браузер Internet Explorer поддерживает события мыши прямо для тега IMG.
<img src="1.gif" onMouseOver="this.src='2.gif'" onMouseOut="this.src='1.gif'">
Событие onMouseOver отвечает за наведение курсора мыши на рисунок, а onMouseOut за вывод курсора за пределы изображения.
Приведенный способ создания эффекта перекатывания не поддерживается некоторыми браузерами, и, в результате, получится обычный рисунок без всяких эффектов. Чтобы сделать код универсальным и работающим в разных браузерах, следует использовать события мыши на ссылке, внутри которой размещается изображение.
<a href="#" onMouseOver="document.Rollover.src='2.gif'" onMouseOut="document.Rollover.src='1.gif'"><img src="1.gif" border=0 name="Rollover"></a>
Обращаться к изображению можно разными способами, например, через массив document.images['имя рисунка'].src или просто по имени, как дается в примере, document.Имя рисунка.src. Уникальное имя для изображения указывается внутри тега IMG парамером name. Изменение любого изображения дает большой простор для дизайнерских изысков. Однако, следует учитывать, что браузеры по разному работают с размерами изображения. Internet Explorer вычисляет ширину и высоту каждого изображения и соответственно меняет этот параметр для каждой картинки при ее смене. Netscape берёт размеры первого загруженного изображения, а следующие масштабирует до его размеров. Для преодоления данного расхождения делайте изображения для эффекта перекатывания одного размера.
Интересный эффект, также, получается при использовании анимированного изображения в формате GIF. Рисунок, который представлен ниже, меняется на цветной с изображением крутящей шестеренки.
Поскольку обращение к рисунку происходит по его имени, можно менять любое изображение на веб-странице. Это позволяет заменять одновременно несколько картинок при наведении курсора мыши лишь на одну.
<img src="1.gif" name="Rollover1">
<a href="#" onMouseOver="document.Rollover1.src='2.gif'; document.Rollover2.src='4.gif'" onMouseOut="document.Rollover1.src='1.gif'; document.Rollover2.src='3.gif'"><img src="3.gif" border=0 name="Rollover2"></a>
Ниже показан пример использования такого приема. При наведении на слова, обозначающие стороны света, они меняют свой цвет на синий и дополнительно появляется указатель в центре розы.
--------------------------------------------------------------------------------
Предварительная загрузка изображений
При создании эффекта перекатывания, загрузка происходит только первого рисунка. При наведении курсора мыши на изображение, начинается загрузка последующих рисунков, что происходит не мгновенно и портит впечатление от ожидания. Поэтому желательно изображения загружать заранее, еще до их демонстрации. Для этого используется объект new в JavaScript. В примере, показанном ниже, функция preloadImage загружает изображения в память и проверяет, все ли они уже загружены. Вызов функции происходит с помощью события onLoad указанном в теге BODY.
Пример. Предварительная загрузка изображения
<html>
<head>
<script language="JavaScript">
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImage(pic, overpic) {
if (document.images && (preloadFlag == true)) {
document[pic].src = overpic;
}
}
var preloadFlag = false;
function preloadImages() {
frame = new Array();
a = preloadImages.arguments;
if (document.images) {
for (i=0; i<a.length; i++) {
if (a[i].indexOf("#")!=0) { frame[i] = newImage(a[i]); }
}
preloadFlag = true;
}
}
</script>
<body onLoad="preloadImages('1.gif', '2.gif')">
<a href="#" onMouseOver="changeImage('imgR', '2.gif')" onMouseOut="changeImage('imgR', '1.gif')"><img src="1.gif" name=imgR></a>
</body>
</html>
Эффектом перекатывания или Rollover называют замену одного изображения другим при наведении на него курсора мыши. Наводим мышь на рисунок, он меняется на другой, уводим мышь, рисунок становится прежним.
Браузер Internet Explorer поддерживает события мыши прямо для тега IMG.
<img src="1.gif" onMouseOver="this.src='2.gif'" onMouseOut="this.src='1.gif'">
Событие onMouseOver отвечает за наведение курсора мыши на рисунок, а onMouseOut за вывод курсора за пределы изображения.
Приведенный способ создания эффекта перекатывания не поддерживается некоторыми браузерами, и, в результате, получится обычный рисунок без всяких эффектов. Чтобы сделать код универсальным и работающим в разных браузерах, следует использовать события мыши на ссылке, внутри которой размещается изображение.
<a href="#" onMouseOver="document.Rollover.src='2.gif'" onMouseOut="document.Rollover.src='1.gif'"><img src="1.gif" border=0 name="Rollover"></a>
Обращаться к изображению можно разными способами, например, через массив document.images['имя рисунка'].src или просто по имени, как дается в примере, document.Имя рисунка.src. Уникальное имя для изображения указывается внутри тега IMG парамером name. Изменение любого изображения дает большой простор для дизайнерских изысков. Однако, следует учитывать, что браузеры по разному работают с размерами изображения. Internet Explorer вычисляет ширину и высоту каждого изображения и соответственно меняет этот параметр для каждой картинки при ее смене. Netscape берёт размеры первого загруженного изображения, а следующие масштабирует до его размеров. Для преодоления данного расхождения делайте изображения для эффекта перекатывания одного размера.
Интересный эффект, также, получается при использовании анимированного изображения в формате GIF. Рисунок, который представлен ниже, меняется на цветной с изображением крутящей шестеренки.
Поскольку обращение к рисунку происходит по его имени, можно менять любое изображение на веб-странице. Это позволяет заменять одновременно несколько картинок при наведении курсора мыши лишь на одну.
<img src="1.gif" name="Rollover1">
<a href="#" onMouseOver="document.Rollover1.src='2.gif'; document.Rollover2.src='4.gif'" onMouseOut="document.Rollover1.src='1.gif'; document.Rollover2.src='3.gif'"><img src="3.gif" border=0 name="Rollover2"></a>
Ниже показан пример использования такого приема. При наведении на слова, обозначающие стороны света, они меняют свой цвет на синий и дополнительно появляется указатель в центре розы.
--------------------------------------------------------------------------------
Предварительная загрузка изображений
При создании эффекта перекатывания, загрузка происходит только первого рисунка. При наведении курсора мыши на изображение, начинается загрузка последующих рисунков, что происходит не мгновенно и портит впечатление от ожидания. Поэтому желательно изображения загружать заранее, еще до их демонстрации. Для этого используется объект new в JavaScript. В примере, показанном ниже, функция preloadImage загружает изображения в память и проверяет, все ли они уже загружены. Вызов функции происходит с помощью события onLoad указанном в теге BODY.
Пример. Предварительная загрузка изображения
<html>
<head>
<script language="JavaScript">
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImage(pic, overpic) {
if (document.images && (preloadFlag == true)) {
document[pic].src = overpic;
}
}
var preloadFlag = false;
function preloadImages() {
frame = new Array();
a = preloadImages.arguments;
if (document.images) {
for (i=0; i<a.length; i++) {
if (a[i].indexOf("#")!=0) { frame[i] = newImage(a[i]); }
}
preloadFlag = true;
}
}
</script>
<body onLoad="preloadImages('1.gif', '2.gif')">
<a href="#" onMouseOver="changeImage('imgR', '2.gif')" onMouseOut="changeImage('imgR', '1.gif')"><img src="1.gif" name=imgR></a>
</body>
</html>
- Piloan
- Капитан
- Сообщений: 187
- Зарегистрирован: Сб янв 04, 2003 7:16 am
- Откуда: Казань
- Пункты репутации: 0
Миша Спларов » Ср июн 09, 2004 11:04 am
2DamNeR
<a href='http://htmlcoder.visions.ru/' target='_blank'>http://htmlcoder.visions.ru/</a>
<a href='http://htmlcoder.visions.ru/' target='_blank'>http://htmlcoder.visions.ru/</a>
«Проектирование интерфейсов — увлекательный дизайнерский процесс. Схожее удовольствие можно получить от сложной верстки, от создания многомерных схем и решения других задач на логику и эстетику». (q) A. Лебедев
- Миша Спларов
- Генерал-лейтенант
- Сообщений: 3022
- Зарегистрирован: Пн апр 22, 2002 7:58 am
- Откуда: Россия, Томск
- Пункты репутации: 0
Сообщений: 6
• Страница 1 из 1
Вернуться в Дизайн + web-дизайн
Кто сейчас на форуме
Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 14