5 советов по JavaScript

Если вы хотите научиться строить с нуля свои собственные ролловеры, вам придется изучить все основные принципы JavaScript. Для начала вам следует знать, что JavaScript, начиная с версии 1.2 и выше, различает в документе несколько типов объектов. Например, изображения распознаются как объекты, когда на них ссылаются по имени. Это означает, что при обмене изображениями вам не придется долго с ними возиться — вы просто приписываете этому действию имя изображения и задаете его источник. На самом деле вам даже не нужно декларировать или создавать никаких функций. Ваш самый первый код на JavaScript может быть, например таким:

   <A HREF=»index.html»
   onMouseOver=»imgbutton.src=’button2.gif’»
   onMouseOuts=»imgbutton.src=’button1.gif’»>
   <IMG SRC«»buttoni.gif»
   NAME=»imgbutton»></A>

Этот скрипт встраивает в HTML-файл гиперссылку на объект-изображение с именем ‘imgbutton’. Это имя задано в последней строке. Если перевести на русский, то этот текст гласит: «Когда курсор мыши будет находиться поверх изображения под названием ‘imgbutton’, замените его источник на button2.gif. Когда курсор уйдет в сторону, верните на его место button1.gif». Но мы еще не закончили...

Проблема данного скрипта в том, что второе изображение не загрузится до тех пор, пока курсор не наедет на исходное изображение, то есть для пользователя в этом случае возникнет пауза. Решить эту проблему можно двумя способами. Первый метод — быстрый и грубый. Он даже не включает в себя JavaScript. Просто перед ролловером нужно вставить следующую строку:

   <IMG SRC=»button2.gif»WIDTH=»0» HEIGHT.»0»>

В этом случае изображение будет незаметно загружено перед ролловером, так что к тому времени, когда пользователь передвинет курсор на это изображение, файл уже будет в Web-кэше.

Чистый и честный способ сделать то же самое — создать в JavaScript массив, предварительно загружающий изображение. Чтобы понять, что такое массив, можно представить себе ряд коробок. Если вас попросили положить объект в третью по счету коробку, вы в точности будете знать, о чем идет речь. Точно так же вы поймете, если вас попросят взять объект из определенной коробки. Прежде чем сообщать скрипту, какие изображения нужно предварительно загружать, мы должны создать сами коробки, то есть определить массив.

Делается это таким образом. Сначала в HTML-файл перед меткой вставляется декларация скрипта:

   <SCRIPT LANGUAGE=javascript>

Затем создается массив, ему присваивается имя и указывается количество слотов:

   var rollover = new Array(2)

Затем слоты заполняются, то есть декларируются изображения и для каждого из них определяется источник:

rollover[o]= new Image()
 rollover[o].src = «button1.gif»
 rollover[1]= new Image()
 rollover[1].src = «button2.gif»

Таким образом, мы загружаем изображения. Чтобы заставить их сменять друг друга, нам придется написать функцию...

Функция — это список инструкций с уникальным идентификатором. Если этот список инструкций нужно выполнить, то вместо того, чтобы снова целиком вводить его в программу, можно просто обратиться к функции по имени. Это очень важная часть JavaScript, поскольку, как только вы научитесь создавать функции, вы сможете создавать повторяемый код, то есть так называемый объектно-ориентированный код, чему, собственно, и посвящен весь JavaScript. В данном случае мы построим две функции: одна из них будет изменять изображение, когда на него наедет курсор, а другая будет возвращать все обратно.

   function change() {
   document.imgbutton.src = rollover[i].src,
   return true;
   }
   function changeBackQ {
   document.imgbutton.src = rolloverjoj.src,
   return true;
   } 

Код каждой из этих функций на самом деле довольно прост. Сначала объявляется имя функции, а затем то действие, которое она выполняет. В конце мы вставили метку окончания HTML:

   </SCRIPT>

Вызвать функцию сравнительно просто. Мы обращаемся к ней непосредственно из ссылки ролловера:

   <A HREF=»index.html»
   onMouseover=»change()»onMouseout=»
   changeBack()»><IMG SRC=»button1.gif»
   NAME=»imgbutton»></A>

Этот скрипт легко продолжить, а поскольку ссылки на изображения в функциях ‘change’ и ‘changeBack’ можно изменить в зависимости от того, к какой кнопке они относятся, это означает, что одни и те же функции можно применять повторно для нескольких кнопок. Что мы и делаем.