Chimage

Изменение картинки

Изменить картинку можно только присвоив свойству src встроенного объекта IMAGE новое значение. На странице "Программирование графики" показано, как это происходит в простейшем случае. При этом замечено, что медленная перезагрузка картинки с сервера не позволяет реализовать быстрое листание. Теперь мы попробуем решить эту проблему.

Собственно решение заключается в разведении по времени подкачки страницы и ее отображения. Для этой цели используют конструктор объекта IMAGE:

<table>

...

<td>

<a href="javascript:void(0);"

onMouseover="document.m0.src=color[0].src;return true;"

onMouseout="document.m0.src=mono[0].src;return true;"

</a>

</td>

...

</table>

onMouseover="document.m0.src=color[0].src;return true;"

onMouseout="document.m0.src=mono[0].src;return true;"

onMouseover="document.m1.src=color[1].src;return true;"

onMouseout="document.m1.src=mono[1].src;return true;"

onMouseover="document.m2.src=color[2].src;return true;"

onMouseout="document.m2.src=mono[2].src;return true;"

onMouseover="document.m3.src=color[3].src;return true;"

onMouseout="document.m3.src=mono[3].src;return true;"

onMouseover="document.m4.src=color[4].src;return true;"

onMouseout="document.m4.src=mono[4].src;return true;"

onMouseover="document.m5.src=color[5].src;return true;"

onMouseout="document.m5.src=mono[5].src;return true;"

onMouseover="document.m6.src=color[6].src;return true;"

onMouseout="document.m6.src=mono[6].src;return true;"

onMouseover="document.m7.src=color[7].src;return true;"

onMouseout="document.m7.src=mono[7].src;return true;"

onMouseover="document.m8.src=color[8].src;return true;"

onMouseout="document.m8.src=mono[8].src;return true;"

onMouseover="document.m9.src=color[9].src;return true;"

onMouseout="document.m9.src=mono[9].src;return true;"

onMouseover="document.m10.src="color[10].src;return" true;"

onMouseout="document.m10.src="mono[10].src;return" true;"

onMouseover="document.m11.src="color[11].src;return" true;"

onMouseout="document.m11.src="mono[11].src;return" true;"

onMouseover="document.m12.src="color[12].src;return" true;"

onMouseout="document.m12.src="mono[12].src;return" true;"

onMouseover="document.m13.src="color[13].src;return" true;"

onMouseout="document.m13.src="mono[13].src;return" true;"

onMouseover="document.m14.src="color[14].src;return" true;"

onMouseout="document.m14.src="mono[14].src;return" true;"

onMouseover="document.m15.src="color[15].src;return" true;"

onMouseout="document.m15.src="mono[15].src;return" true;"

onMouseover="document.m16.src="color[16].src;return" true;"

onMouseout="document.m16.src="mono[16].src;return" true;"

onMouseover="document.m17.src="color[17].src;return" true;"

onMouseout="document.m17.src="mono[17].src;return" true;"

onMouseover="document.m18.src="color[18].src;return" true;"

onMouseout="document.m18.src="mono[18].src;return" true;"

onMouseover="document.m19.src="color[19].src;return" true;"

onMouseout="document.m19.src="mono[19].src;return" true;"

onMouseover="document.m20.src="color[20].src;return" true;"

onMouseout="document.m20.src="mono[20].src;return" true;"

onMouseover="document.m21.src="color[21].src;return" true;"

onMouseout="document.m21.src="mono[21].src;return" true;"

onMouseover="document.m22.src="color[22].src;return" true;"

onMouseout="document.m22.src="mono[22].src;return" true;"

onMouseover="document.m23.src="color[23].src;return" true;"

onMouseout="document.m23.src="mono[23].src;return" true;"

onMouseover="document.m24.src="color[24].src;return" true;"

onMouseout="document.m24.src="mono[24].src;return" true;"

onMouseover="document.m25.src="color[25].src;return" true;"

onMouseout="document.m25.src="mono[25].src;return" true;"

onMouseover="document.m26.src="color[26].src;return" true;"

onMouseout="document.m26.src="mono[26].src;return" true;"

onMouseover="document.m27.src="color[27].src;return" true;"

onMouseout="document.m27.src="mono[27].src;return" true;"

onMouseover="document.m28.src="color[28].src;return" true;"

onMouseout="document.m28.src="mono[28].src;return" true;"

onMouseover="document.m29.src="color[29].src;return" true;"

onMouseout="document.m29.src="mono[29].src;return" true;"

onMouseover="document.m30.src="color[30].src;return" true;"

onMouseout="document.m30.src="mono[30].src;return" true;"

onMouseover="document.m31.src="color[31].src;return" true;"

onMouseout="document.m31.src="mono[31].src;return" true;"

border=0>

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

данная страница довольно тяжелая для обработки браузером.

Главное, тем не менее, не в том, что картинки замещаются, а в том с какой скоростью они это делают. Для достижения нужного результата в начале страницы были созданы массивы картинок, в которые графика была перекачена перед отображением(обратите внимание на строку статуса при загрузке страницы):

color = new Array(32);

mono = new Array(32);

for(i=0;i<32;i++)

{

mono[i] = new Image();

color[i] = new Image();

if(i.toString().length==2)

{

mono[i].src = "../images/jsi/mapb0"+i+".gif";

color[i].src = "../images/jsi/mape0"+i+".gif";

}

else

{

mono[i].src = "../images/jsi/mapb00"+i+".gif";

color[i].src = "../images/jsi/mape00"+i+".gif";

}

}

Еще один характерный прием - применение функции отложенного исполнения JavaScript-кода(eval()):

function def()

{

for(i=0;i<32;i++)

{

eval("document.m"+i+".src="mono["+i+"].src");

" }

for(i="0;i

" {

eval("document.r"+i+".src=rm["+i+"].src");

}

}

В" данном случае eval() экономит наши усилия по набору операций присваивания (32 строки - это не фунт изюму).

u="u686.25.spylog.com";d=document;nv=navigator;na=nv.appName;p=1;" bv="Math.round(parseFloat(nv.appVersion)*100);" n="(na.substring(0,2)=="Mi")?0:1;rn=Math.random();z="p="+p+"&rn="+rn;y="";" y+=""; y+="

"; y+=""; d.write(y);if(!n) { d.write("

Содержание раздела