Клиентский JavaScript. Справочник
Пример 1: Создание изображения тэгом
Пример 1: Создание изображения тэгом IMG. Следующий код определяет изображение тэгом IMG:
<IMG NAME="aircraft" SRC="f15e.gif" ALIGN="left" VSPACE="10"> Следующий код обращается к изображению:
document.aircraft.src='f15e.gif' Если Вы обращаетесь к изображению по имени, Вы обязаны включать имя формы, если изображение расположено на форме. Следующий код обращается к изображению на форме:
document.myForm.aircraft.src='f15e.gif' Пример 2: Создание изображения конструктором Image. Здесь создаётся объект Image по имени myImage шириной 70 пикселов и высотой 50 пикселов. Если URL источника, seaotter.gif, не имеет размера 70x50 пикселов, он масштабируется до данного размера.
myImage = new Image(70, 50)
myImage.src = "seaotter.gif" Если Вы опускаете аргументы width и height в конструкторе Image, myImage создаётся с размерами, указанными в исходном URL..
myImage = new Image()
myImage.src = "seaotter.gif" Пример 3: Вывод изображения на основе ввода данных в форму. Здесь пользователь выбирает, какое изображение вывести. Пользователь заказывает рубашку, заполняя форму. Изображение выводится в зависимости от указанных цвета и размера рубашки. Все возможные варианты загружаются заранее, чтобы сократить время на ответ. Если пользователь щёлкает кнопку для заказа рубашки, функция allShirts выводит изображения всех рубашек.
<SCRIPT>
shirts = new Array()
shirts[0] = "R-S"
shirts[1] = "R-M"
shirts[2] = "R-L"
shirts[3] = "W-S"
shirts[4] = "W-M"
shirts[5] = "W-L"
shirts[6] = "B-S"
shirts[7] = "B-M"
shirts[8] = "B-L" doneThis = 0
shirtImg = new Array() // Предварительная загрузка изображений рубашек
for(idx=0; idx < 9; idx++) {
shirtImg[idx] = new Image()
shirtImg[idx].src = "shirt-" + shirts[idx] + ".gif"
} function changeShirt(form)
{
shirtColor = form.color.options[form.color.selectedIndex].text
shirtSize = form.size.options[form.size.selectedIndex].text newSrc = "shirt-" + shirtColor.charAt(0) + "-" + shirtSize.charAt(0) + ".gif"
document.shirt.src = newSrc
} function allShirts()
{
document.shirt.src = shirtImg[doneThis].src
doneThis++
if(doneThis != 9)setTimeout("allShirts()", 500)
else doneThis = 0 return
}</SCRIPT> <FONT SIZE=+2><B>Netscape Polo Shirts!</FONT></B> <TABLE CELLSPACING=20 BORDER=0>
<TR>
<TD><IMG name="shirt" SRC="shirt-W-L.gif"></TD> <TD>
<FORM>
<B>Color</B>
<SELECT SIZE=3 NAME="color" onChange="changeShirt(this.form)">
<OPTION> Red
<OPTION SELECTED> White
<OPTION> Blue
</SELECT> <P>
<B>Size</B>
<SELECT SIZE=3 NAME="size" onChange="changeShirt(this.form)">
<OPTION> Small
<OPTION> Medium
<OPTION SELECTED> Large
</SELECT> <P><INPUT type="button" name="buy" value="Buy This Shirt!"
onClick="allShirts()">
</FORM> </TD>
</TR>
</TABLE> Пример 4: Анимация JavaScript. В этом примере JavaScript используется для создания анимации в объекте Image путём повторяющегося изменения значения его свойства src. Скрипт начинается с предзагрузки 10 изображений, образующих эту анимацию (image1.gif, image2.gif, image3.gif и т.д.). Если объект Image размещён в документе тэгом IMG, image1.gif выводится, и обработчик onLoad начинает анимацию, вызывая функцию animate. Заметьте, что функция animate не вызывает сама себя после изменения свойства src объекта Image. Это происходит из-за того, что при изменении свойства src обработчик onLoad изображения включается и вызывается функция animate.
<SCRIPT>
delay = 100
imageNum = 1 // Предварительная загрузка изображений анимации
theImages = new Array()
for(i = 1; i < 11; i++) {
theImages[i] = new Image()
theImages[i].src = "image" + i + ".gif"
} function animate() {
document.animation.src = theImages[imageNum].src
imageNum++
if(imageNum > 10) {
imageNum = 1
}
} function slower() {
delay+=10
if(delay > 4000) delay = 4000
} function faster() {
delay-=10
if(delay < 0) delay = 0
}
</SCRIPT><BODY BGCOLOR="white"><IMG NAME="animation" SRC="image1.gif" ALT="[Animation]"
onLoad="setTimeout('animate()', delay)"> <FORM>
<INPUT TYPE="button" Value="Slower" onClick="slower()">
<INPUT TYPE="button" Value="Faster" onClick="faster()">
</FORM>
</BODY> См. также примеры для обработчиков onAbort, onError и onLoad.
