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

Изменить картинку можно только присвоив свойству 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>

Isefall Khumbu Isefall Gletcher Khumbu South Wall Mnt.Everest
Gletcher Khumbu Gletcher Khumbu South Wall South Wall
Gletcher Khumbu Gletcher Khumbu Pass Pass Pass

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

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

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<5;i++)
{
eval("document.r"+i+".src=rm["+i+"].src");
}
}

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