Смена картинки при наведении мыши - Компьютерная документация по Windows. Оптимизация Windows.
 Компьютерная документация по Windows. Оптимизация Windows.  Компьютерная документация по Windows. Оптимизация Windows. Поиск
  Здравствуйте  [ Новый пользователь ] Домой  .  Статьи по темам  .  Компьютерная документация  .  Личный кабинет  .  Toп 10  .  Карта сайта  

  Навигация

 Главная   Главная
 Главная   Магазин софта
 Темы новостей   Темы новостей
 Топ 10   Топ 10
 Архив новостей   Архив новостей
 Карта сайта   Карта сайта
 Конструктор   Конструктор
 Обзоры   Обзоры
 Интересное   Интересное
 Рассылка новостей   Рассылка новостей
    Полезные ресурсы
 Пользователи   Пользователи
 Поиск   Поиск
 Написать нам   Написать нам
 Тест скорости   Тест скорости


  Наши темы
Windows 8
Windows 7
Windows Vista
Windows XP
Настройка Windows
Реестр Windows
Восстановление системы
MS-DOS
BIOS
Интернет
Microsoft Office
Сетевые настройки
Обработка видео
Вебмастеру
Оптимизация Windows
Обзор софта
Технологии, обзоры
Обзоры компьютеров и комплектующих
Рецензии
Полезные советы
Продвижение сайтов

Новые обзоры

Как заработать на ремонте компьютеров

Переработка отходов электроники

Типовые неисправности I:Phone, Pad, Pod и Macbook

Место для вашей электронной души

Ремонт компьютеров в Москве


Смена картинки при наведении мыши

Размещено 29/01/2007

Вебмастеру Автор: Алексей Голубев
Сайт: http://www.frnet.narod.ru/
Итак, наша задача – создать скрипт, который бы менял картинку при наведении на нее курсора мыши. Это достаточно стандартная задача и каждый ее решает по-разному. Если у вас есть скрипт, решающий данную проблему, то не спешите закрывать данную статью, так как я предлагаю вам, на мой взгляд, самый оптимальный пример данной программы.


С чего начнем?


Первое, с чего нужно начать – это подготовка рисунков. Для этого вы должны создать два рисунка: первый рисунок – это изображение кнопки в обычном состоянии, без курсора мыши над ним, назовем его image.gif, хотя название можете дать любое; второй – это изображение кнопки в момент, когда над ним находится курсор мыши, назовем его image2.gif. В любом случае вы должны к названию второго изображения прибавлять перед расширением «2» – это одно из условий работы скрипта.


Функция смены картинки при наведении мыши.


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

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

var img1=new Image(); img1.src="article.gif";
var img2=new Image(); img1.src="article2.gif";
var img3=new Image(); img1.src="script.gif";
var img4=new Image(); img1.src="script2.gif";
var img5=new Image(); img1.src="more.gif";
var img6=new Image(); img1.src="more2.gif";

По аналогии добавить ваши собственные картинки.

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

var a=windows.event.srcElement;
Так как событие onMouseOver вызывается не только элементом , то мы выполним проверку: вызывается ли оно нужным элементом. Если да, то функция продолжает выполняться:

if (a.tagName=="IMG")
Далее идет непосредственная смена картинки:

a.src=a.src.substring(0, a.src.length-4) + 2+a.src.substring(a.src.length-4, a.src.length);
Что же делает эта строка? Она читает свойство src, которое вы указали при вставке картинки в HTML-документ, при помощи тега . Вырезает первые n-4 символа, где n – длина строки a.src. Добавляет к вырезанному свойству «2» и расширение с точкой (четыре последних символа строки a.src).

Осталось только дать название функции. Назовем ее change1()

Полный код функции:

function change1() { a=windows.event.srcElement;
if (a.tagName=="IMG")

a.src=a.src.substring(0, a.src.length-4) + 2+a.src.substring(a.src.length-4, a.src.length); }


Возврат картинки.


Я думаю, что нет необходимости расписывать работу функции, поэтому приведу лишь ее код:

function change2() { i a=window.event.srcElement;
if (a.tagName=="IMG")

a.src=a.src.substring(0, a.src.length-5) +

a.src.substring(a.src.length-4, a.src.length);

}


Присваивание функций событиям.


Для работы функций нужно связать их имена с событиями следующим образом:

do*****ent.onmouseover=change1;
do*****ent.onmouseout=change2;

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

И вставляем в теле вывод картинок, например:

Статьи на http://www.frnet.narod.ru/

Скрипты на http://www.frnet.narod.ru/

Перейти на http://www.frnet.narod.ru/



Заключение.


Теперь можете добавлять сколько угодно картинок на страницу, не загромождая ее большим количеством повторяющегося кода. Перспективные улучшения:

1) Проверка, а нужно ли изменять картинку;

2) Изменение картинки при нажатии на нее мышью (onMouseDown).

P.S. Вы можете cкачать этот пример со страницы: http://www.frnet.narod.ru/script.html.
Или задать вопрос автору и ведущему раздела alexey-golubev@mail.ru


 



Компьютерная документация по Windows Copyright © 2008-2019