Урок 12. Работа с изображениями

Загрузка изображений

С помощью сценария можно организовать предварительную загрузку изображений в кэш-память браузера, не отображая их на экране.

<html>
	<head>
		<script>
			var imgFile = new Array() // массив имен графических файлов
			imgFile[0] = "cat0.jpg"
			imgFile[1] = "cat1.jpg"
			imgFile[2] = "cat2.jpg"
			var imgName = new Array() // массив названий картинок
			imgName[0] = "Первый кот"
			imgName[1] = "Второй кот"
			imgName[2] = "Третий кот"
			var imgObj = new Array() // массив объектов изображений
			for (i=0; i<imgFile.length; i++) {
				imgObj[i] = new Image(100,100)
				imgObj[i].src = imgFile[i]
			}
 
			function imgshow(list) {
				var x = list.options[list.selectedIndex].value
				document.all.img0.src = eval("imgObj[" + x + "].src")
			}
 
			var clist = "<select onchange = 'imgshow(this)'>"
			for (i=0; i < imgFile.length; i++) 
				clist += "<option value=" + i + ">" + imgName[i]
			clist += "</select>"
			document.write(clist)
		</script>
	</head>
	<body>
		<img id="img0" src="cat0.jpg">
	</body>
</html>

Смена изображений

Суть смены изображения заключается в том, чтобы с помощью сценария изменить значение атрибута src тега IMG. Если элемент IMG, задающий изображение, содержится в HTML-документе, то в объектной модели имеется объект этого элемента со свойством src. В следующем примере щелчок на изображении из файла заменяет его на другое.

<img id="img0" src="cat0.jpg" onclick="document.all.img0.src='cat1.jpg'">

В приведенном примере смена изображения происходит лишь при первом щелчке на нем. Последующие щелчки не приведут к видимым изменениям, поскольку второе изображение будет заменяться самим собой. Чтобы повторный щелчок приводил к отображению предыдущего рисунка следует создать переменную-триггер (так называемый флаг), принимающий одно из двух возможных значений. По текущему значению флага сценарий может определить, какое именно из двух изображений следует отобразить.

<script>
	var flag=false
 
	function imgchange() {
		if (flag) document.all.img0.src='cat0.jpg'
		else document.all.img0.src='cat1.jpg'
		flag = !flag
	}
</script>
 
<img id="img0" src="cat0.jpg" onclick="imgchange()">

Следующий листинг позволяет при щелчке кнопкой мыши на миниатюре увеличивать изображение, а затем при щелчке на увеличенном изображении его уменьшать.

<script>
	var pic_sm = new Array("mcat1.jpg", "mcat2.jpg", "mcat3.jpg")
	var pic_bg = new Array("cat1.jpg", "cat2.jpg", "cat3.jpg")
	var pic_flag = new Array(pic_sm.length) // массив флагов
 
	/* Формирование строки тегов изображений */
	var xstr = ""
	for (i=0; i<pic_sm.length; i++)
		xstr += '<img id="img'+i+'" src="'+pic_sm[i]+'" onclick="imgchange()">'
	document.write(xstr)
 
	function imgchange() {
		var xid=event.srcElement.id //id изображения, на котором был щелчок
		var n=parseInt(xid.substr(3)) // выделяем номер элемента
		if (pic_flag[n]) document.all[xid].src=pic_sm[n]
		else document.all[xid].src=pic_bg[n]
		pic_flag[n] = !pic_flag[n]
	}
</script>