НОУ ИНТУИТ | Практикум по программированию на JavaScript. Лекция 17: Изменение изображения с помощью функции

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 19.10.2006 | Доступ: платный | Студентов: 0 / 0 | Оценка: 3.95 / 3.68 | Длительность: 09:40:00

Темы: Интернет-технологии, Программирование

Специальности: Разработчик интернет-проектов

|

Вам нравится? Нравится 87 студентам

| Поделиться |

Поддержать курс

| Скачать электронную книгу

Аннотация: Динамическое изменение изображений с помощью функций.

Ключевые слова: тег, команда, HTML, функция, регистр, вызов функции, имя новой функции, атрибут

Концепция

Вот еще один пример использования onMouseOver и onMouseOut. На этот раз вместо включения оператора JavaScript для смены картинки в тег <A HREF> обработчики событий onMouseOver и onMouseOut вызывают функцию.

В общем, когда нужна только одна команда JavaScript, можно включить ее в тег HTML <A HREF>. Для нескольких операторов JavaScript больше подходит функция. В реальном мире на странице часто требуется многократное изменение изображения с помощью JavaScript.

Сценарий

<HTML>
<HEAD>
  <title> Пример JavaScript </title>
<SCRIPT type="text/javascript">
function up() 
{ 
    document.mypic.src="up.gif"  
}
function down()
{ 
    document.mypic.src="down.gif"  
}
</SCRIPT>
</HEAD>
  <BODY>
    <CENTER>
    <h2>Пример анимации</h2>

<A HREF="http://www.intuit.ru"
  onMouseOver="up()"  onMouseOut="down()">
<IMG SRC="down.gif" NAME="mypic" BORDER=0></A>   
  </BODY>
</HTML>

Результат работы сценария

Пример анимации с помощью OnMouseOver и OnMouseOut.

Если быстро двигать курсором мыши на изображении, то возникает ощущение ожившего изображения — анимации.

Разбор сценария

Не забывайте про регистр символов при записи OnMouseOver и OnMouseOut.

Обратите внимание, что в сценарии созданы две функции.

<SCRIPT type="text/javascript">
function up() 
{ 
document.mypic.src="up.gif" 
}
function down() 
{ 
document.mypic.src="down.gif" 
}

Функции выполняют то же, что и команды в прошлом уроке. Помните иерархию объектов? Сначала документ, потом имя, присвоенное объекту, и наконец SRC. Функции названы up() и down().

Теперь посмотрим на вызов функции:

<A HREF="http://www.intuit.ru"
onMouseOver="up()" onMouseOut="down()">
<IMG SRC="down.gif" NAME="mypic" 
BORDER=0></A>

Формат почти такой же, как и использованный в Уроке 15, но здесь вместо включения оператора в команду HREF вызывается функция.

Этот пример по-прежнему имеет один оператор JavaScript. Вспомните, что обычно функции используются для объединения нескольких операторов. Мы хотели просто сделать пример коротким.

Если вы решите использовать многократную смену картинок с помощью JavaScript, помните, что для каждого случая нужно создавать имя новой функции и соединять определенные изображения с этими функциями, изменяя также атрибут NAME. Например: вы хотите поместить на страницу еще одну такую же меняющуюся картинку. Для этого создаем две новые функции, копируя предыдущие две функции и добавляя к именам цифру 2 (обратите на это внимание в коде ниже). Затем необходимо изменить в каждом случае атрибут NAME (снова обратите внимание на код ниже), поэтому изменяем имя на mypic2. Не забудьте изменять его везде, где оно появляется. Получаем примерно следующее в разделе заголовка HEAD:

<SCRIPT LANGUAGE="JavaScript">
function up()
{
   document.mypic.src="up.gif"
}
function down() 
{ 
   document.mypic.src="down.gif"  
}

function up2()   
{ 
   document.mypic2.src="up.gif"  
}

function down2() 
{ 
   document.mypic2.src="down.gif"  
}

</SCRIPT>

... и примерно следующее для вызова двух различных изображений:

<A HREF="http://www.intuit.ru"
	onMouseOver="up()" 
	onMouseOut="down()">
    <IMG SRC="down.gif" NAME="mypic" 
BORDER=0></A>

<a href="http://www.intuit.ru"
	onMouseOver="up2()" 
	onMouseOut="down2()">
    <IMG SRC="down.gif" NAME="mypic2" 
BORDER=0></A>

Видите, как новые функции связаны с новыми именами? Делайте это каждый раз при добавлении новой меняющейся картинки. Если требуется три случая, то добавьте цифру 3 везде, где выше добавлена 2. Если четыре, добавьте 4, и т.д.

Задание

Переделайте последнее задание, использующее Bubble1.gif и Bubble2.gif. Создайте две функции для смены этих изображений.

Возможное решение

<html>
 <head>
 <SCRIPT type="text/javascript">
    function swap1for2()
      {  document.pic1.src="bubble2.gif" }
    function swap2for1()
      { document.pic1.src="bubble1.gif" }
 </SCRIPT>
 </head>
 <body bgcolor="white">
 <center>
 <h1> Иван Иванович</h1>
 <a href="" onMouseOver="swap1for2() "
    onMouseOut="swap2for1()">
 <img src="bubble1.gif" border=0 name="pic1"> </a>
 </center>
 </body>
 </html>

Дальше >>

Авторизоваться

Практикум по программированию на JavaScript