Добавляем...


Кнопки с изменяемым изображением

Одним из наиболее часто используемых вариантов украшения Web-страниц с помощыю JavaScript является использование кнопок с изменяемым изображением. Это кнопки, изображение на которых меняется, когда пользователь помещает на них указатель мыши или происходит какое-то другое предусмотренное для кнопки событие. Например, вместо изменения изображения при размещении на нем указателя мыши, оответствующее изображение может изменяться при щелчке на кнопке.
Чтобы создать простейшую кнопку с изменяемым изображением, нам понадобятся два или три изображения, соответствующие различным состояниям кнопки, — неактивному, активному и состоянию недоступности кнопки. Первые два состояния характеризуют, соответственно, размещение указателя мыши вне кнопки и на ней, а состояние недоступности кнопки — это необязательное состояние, используемое в том і случае, когда вы хотите указать недоступность кнопки (например, путем прорисовки ее в "бледных" тонах).
Идея заключается в том, что сначала с помощью дескриптора <img> в документ помещается изображение, соответствующее неактивному состоянию кнопки. Когда указатель мыши попадает на изображение, атрибут src изображения переключается на изображение, характеризующее активное состояние. Когда указатель мыши с изображения смещается, происходит возврат к исходному изображению. Если у нас есть изображение

<img src="imageoff.gif" name="myimage" id="myimage" />

то подходящим вариантом реализации для кнопки с изменяемым изображением может быть

<img src="imageoff.gif" name="myimage" id="myimage"
onmouseover="document.myimage.src='imageon.gif';"
onmouseout="document.myimage.src='imageoff.gif';" />

Данный пример можно записать в сжатом виде, если не указывать полную ссылку на объект, а использовать ключевое слово this, как показано ниже:

<img src="imageoff.gif" onmouseover="this.src='imageon.gif'; " onmouseout="this.src='imageoff.gif';" />


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика