Кратко о HTML, JavaScript и WWW



             

Графика


До появления версии Navigator 3.0 в JavaScript использовались только встроенные объекты типа Image. В новой версии языка появился конструктор для этого типа объектов:

new_image = new Image()

new_image = new Image (width,height)

Часто для реализации мультипликации создают массив графических объектов, которые потом прокручивают один за другим:

img_array = new Array()

img_array[0] = new Image(50,100)

img_array[1] = new Image(50,100)

....

img_array[99] = new Image(50,100)

У объекта Image существует 10 свойств, из которых самым важным является src. Для присваивания конкретных картинок элементам массива img_array следует воспользоваться следующей последовательностью команд:

img_array[0].src = "image1.gif"

img_array[1].src = "image2.gif"

...

img_array[99].src = "image100.gif"

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

В новой версии языка объект типа Image можно поименовать в HTML таге IMG, а затем обращаться к нему по имени. При этом следует учитывать, что если Image используется внутри формы, то он является свойством этой формы. Это значит, что для следующего графического объекта должны применяться разные составные имена:

<img name=car src=car.gif> <-

document.car.src = "car1.gif"

<form name=kuku>

<img name=car src=car.gif>

</form>

document.kuku.car.src = "car1.gif"

Однако наиболее часто в примерах использования скриптов можно встретить обращение к Image по индексу в массиве всех графических объектов данной страницы. Если наш объект, например, является вторым Image на странице, то будь он внутри формы или за ее пределами к нему всегда можно обратиться по индексу:

document.images[1].src = "car1.gif"

Расширяя пример с массивом Image, создадим документ, в который будет встроена мультипликация, определенная нашим массивом:

Пример 8.

<HTML> <HEAD> <SCRIPT> function multi_pulti() { img_array = new Array() img_array[0] = new Image(50, 100) .... img_array[99] = new Image(50, 100) img_array[0].src = "image1.gif" ... img_array[99].src = "image100.gif" n=0 while(n==0) { document.images[0].src = img_array[0].src ... } } </SCRIPT> </head> <body onLoad="multi_pulti()"> <img src=image1.gif> </body> </html>




Содержание  Назад  Вперед