Wiki-учебник по веб-технологиям: JavaScript/ИзменениеИзображенийПоСобытиямИнициированныхПользователем ...

Главная | Каталог |

Изменение изображений по событиям, инициированных пользователем


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

<a href="#" 
  onMouseOver="document.myImage2.src='img2.gif'" 
  onMouseOut="document.myImage2.src='img1.gif'">
<img src="img1.gif" name="myImage2" width=160 height=50 border=0></a>


Однако этот код вызывает некоторые проблемы:

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

Имеются два требования для сохранения гибкости этого сценария:

Взгляните на код (добавлены некоторые комментарии):

<html>
<head>

<script language="JavaScript">
<!-- hide

// ******************************************************
// Script from Stefan Koch - Voodoo\'s Intro to JavaScript
//     http://rummelplatz.uni-mannheim.de/~skoch/js/ 
//       JS-book: http://www.dpunkt.de/javascript
//    You can use this code if you leave this message
// ******************************************************

  // ok, we have a JavaScript browser
  var browserOK = false;
  var pics;

// -->
</script>

<script language="JavaScript1.1">
<!-- hide

  // JavaScript 1.1 browser - oh yes!
  browserOK = true;
  pics = new Array();

// -->
</script>



<script language="JavaScript">
<!-- hide

var objCount = 0; // number of (changing) images on web-page

function preload(name, first, second) {  

  // preload images and place them in an array

  if (browserOK) {     
    pics[objCount] = new Array(3);
    pics[objCount][0] = new Image();
    pics[objCount][0].src = first;
    pics[objCount][1] = new Image();
    pics[objCount][1].src = second;
    pics[objCount][2] = name;
    objCount++;
  }
}

function on(name){
  if (browserOK) {
     for (i = 0; i < objCount; i++) {
      if (document.images[pics[i][2]] != null)
        if (name != pics[i][2]) { 
          // set back all other pictures
          document.images[pics[i][2]].src = pics[i][0].src;
        } else {
           // show the second image because cursor moves across this image
           document.images[pics[i][2]].src = pics[i][1].src;
        }
    }
  }
}

function off(){
  if (browserOK) {
     for (i = 0; i < objCount; i++) {
      // set back all pictures
      if (document.images[pics[i][2]] != null) 
        document.images[pics[i][2]].src = pics[i][0].src;
    }
  }
}

// preload images - you have to specify which images should be preloaded
// and which Image-object on the wep-page they belong to (this is the first
// argument). Change this part if you want to use different images (of course
// you have to change the body part of the document as well)

preload("link1", "img1f.gif", "img1t.gif");
preload("link2", "img2f.gif", "img2t.gif");
preload("link3", "img3f.gif", "img3t.gif");

// -->
</script>
<head>



<body>
<a href="link1.htm" onMouseOver="on('link1')" 
  onMouseOut="off()">
<img name="link1" src="link1f.gif" 
  width="140" height="50" border="0"></a>

<a href="link2.htm" onMouseOver="on('link2')" 
  onMouseOut="off()">
<img name="link2" src="link2f.gif" 
  width="140" height="50" border="0"></a>

<a href="link3.htm" onMouseOver="on('link3')" 
  onMouseOut="off()">
<img name="link3" src="link3f.gif" 
  width="140" height="50" border="0"></a>
</body>
</html>


Этот сценарий помещает все изображения в массив pics. Функция preload(), вызванная в начале заполняет этого массив. Вы можете видеть, что мы вызываем функцию preload() следующим образом:

preload("link1", "img1f.gif", "img1t.gif");


Это означает, что сценарий должен загрузить два изображения img1f.gif и img1t.gif. Первое изображение должно отображаться, когда курсор вне области изображения. Когда пользователь перемещает курсор по области изображения, показывается второе изображение. С первым параметром “img1” при вызове функции preload() мы определяем, какой Image-объект на web-странице принадлежит двум предварительно загруженным изображениям. Если вы посмотрите на часть <body> нашего примера, вы найдете изображение с именем img1. Мы используем имя изображения (а не номер) для того, чтобы можно было изменить порядок изображений без изменения сценария.

Две функции on() и off() вызваны через обработчики события onMouseOver и onMouseOut. Поскольку изображения не могут реагировать на события MouseOver и MouseOut, мы должны поместить ссылку в изображения.

Как вы видите, функция on() устанавливает в начальное состояние все остальные изображения. Это необходимо, чтобы избежать того, что несколько изображений будут одновременно подсвечено (событие MouseOut не происходит например, когда пользователь перемещает курсор из изображения непосредственно за пределы окна).

Изображения, конечно замечательный путь для улучшения вашей web-страницы. Image-объект позволяет вам создавать действительно сложные эффекты. Но пожалуйста обратите внимание на то, что не каждое изображение и программа JavaScript улучшают вашу страницу. В сети, вы можете видеть много примеров где изображения используются ужасным способом. Не количество изображений делает вашу страницу хорошей, а качество. Загружать 50 КБ плохой графики действительно раздражает. Помните об этом при создании эффектов изображения с помощью JavaScript и ваши посетители или покупатели наверняка возвратятся.