Изменение одного изображения на другое

Если в документе есть изображение <img> и вам необходимо изменить его на другое, то это можно очень просто выполнить простым изменением атрибута src:

var img = document.getElementById('myImage');
img.src = 'new_image_path.gif';

Однако, если для изображения установлены атрибуты height и width, то простого изменения src будет недостаточно. Необходимо также определить ширину и высоту нового изображения, и установить соответствующие атрибуты. Конечно же, ширина и высота изображения будут доступны только тогда, когда изображение сменено и страница обновлена, и чтобы обойти это, можно использовать предварительную загрузку изображения. При этом методе мы создаем новый объект класса Image, устанавливаем для него требуемый параметр src, затем назначаем для него обработчик onload, в котором и будет определяться размер нового изображения:

var img = document.getElementById('myImage');

var newimg = new Image();
newimg.onload = function(){
	img.src = newimg.src;
	img.width = newimg.width;
	img.height = newimg.height;
}
newimg.src = 'new_image_path.gif';

Заметьте, что внутри обработчика onload используется ссылка на img, а не this, так как последняя указывает на объект newimage.