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;"
>
<img name=m0 src=../images/jsi/mapb000.gif border=0>
</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;" >  |
данная страница довольно тяжелая для обработки браузером.
Главное, тем не менее, не в том, что картинки замещаются, а в том с какой скоростью они это делают. Для достижения нужного результата в начале страницы были созданы массивы картинок, в которые графика была перекачена перед отображением(обратите внимание на строку статуса при загрузке страницы):
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+="
