Данная рассылка посвящена web-дизайну и web-программированию. Ведущий рассылки Голубев Алексей. По вопросам размещения статей в рассылке обращайтесь по e-mail: alexey-golubev@mail.ru. Буду всегда рад разместить их здесь, а также на моем сайте. Ссылка на ваш сайт гарантирована! Так же можете присылать и статьи других авторов или ссылки на них в интернете.
» О рассылке
Уважаемые подписчики!
![]()
Данная рассылка посвящена web-дизайну и web-программированию. Ведущий рассылки Голубев Алексей. По вопросам размещения статей в рассылке обращайтесь по e-mail: alexey-golubev@mail.ru. Буду всегда рад разместить их здесь, а также на моем сайте. Ссылка на ваш сайт гарантирована! Так же можете присылать и статьи других авторов или ссылки на них в интернете.
![]()
Данная рассылка посвящена web-дизайну и web-программированию. Ведущий рассылки Голубев Алексей. По вопросам размещения статей в рассылке обращайтесь по e-mail: alexey-golubev@mail.ru. Буду всегда рад разместить их здесь, а также на моем сайте. Ссылка на ваш сайт гарантирована! Так же можете присылать и статьи других авторов или ссылки на них в интернете.
» Сегодня в рассылке (Выпуск №5)
Разделы рассылки:
![]()
![]()
Если у вас есть соображения по увеличению рассылки, увеличению количества ее разделов, то пишите мне. Кроме этого присылайте свои вопросы. Вместе мы ответим на них.
Если у вас есть соображения по увеличению рассылки, увеличению количества ее разделов, то пишите мне. Кроме этого присылайте свои вопросы. Вместе мы ответим на них.
» Новости сайта
1) Переделан дизайн Гостевой книги (http://narod.yandex.ru/guestbook/?owner=16873998&mainhtml=guestbook.html&messageshtml=mass.html). Теперь он не отличается от дизайна всего сайта. Заходите, оставляйте свое мнение о сайте и рассылке, ваши пожелания и вашу критику.
![]()
2) Раздел Анекдоты перерос в раздел Юмор (http://www.frnet.narod.ru/humor.html), где кроме анекдотов Вы найдете: Афоризмы, Смешные истории, Работы студентов по информатике.
![]()
3) Теперь на сайте появилось больше шаблонов (http://www.frnet.narod.ru/tamplate.html), их целых 9. Заходите, качайте, смотрие, используйте.
![]()
Вверх
2) Раздел Анекдоты перерос в раздел Юмор (http://www.frnet.narod.ru/humor.html), где кроме анекдотов Вы найдете: Афоризмы, Смешные истории, Работы студентов по информатике.
3) Теперь на сайте появилось больше шаблонов (http://www.frnet.narod.ru/tamplate.html), их целых 9. Заходите, качайте, смотрие, используйте.
Вверх
» Смена картинки при наведении мыши (JavaScript)
Автор: Алексей Голубев
![]()
Сайт: http://www.frnet.narod.ru/
![]()
Итак, наша задача — создать скрипт, который бы менял картинку при наведении на нее курсора мыши. Это достаточно стандартная задача и каждый ее решает по-разному. Если у вас есть скрипт, решающий данную проблему, то не спешите закрывать данную статью, так как я предлагаю вам, на мой взгляд, самый оптимальный пример данной программы.
![]()
С чего начнем?
![]()
Первое, с чего нужно начать — это подготовка рисунков. Для этого вы должны создать два рисунка: первый рисунок — это изображение кнопки в обычном состоянии, без курсора мыши над ним, назовем его image.gif, хотя название можете дать любое; второй — это изображение кнопки в момент, когда над ним находится курсор мыши, назовем его image2.gif. В любом случае вы должны к названию второго изображения прибавлять перед расширением «2» — это одно из условий работы скрипта.
![]()
Функция смены картинки при наведении мыши.
![]()
Мы приготовили несколько пар рисунков. Если вы создаете целую панель из картинок, то имеет смысл написать универсальную функцию, не привязанную к какому-то конкретному объекту. Этим мы сейчас займемся.
![]()
Вначале функция должна определить источник события. Для этого мы будем использовать свойство объекта window.event – srcElement. В последующем нам придется часто обращаться к нему, поэтому первой строкой запишем присваивание его переменной, например, a:
![]()
var a=windows.event.srcElement;
![]()
Так как событие onMouseOver вызывается не только элементом <img>, то мы выполним проверку: вызывается ли оно нужным элементом. Если да, то функция продолжает выполняться:
![]()
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-документ, при помощи тега <img src="image.gif">. Вырезает первые 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() { var 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); }
![]()
Присваивание функций событиям.
![]()
Для работы функций нужно связать их имена с событиями следующим образом:
![]()
document.onmouseover=change1;
document.onmouseout=change2;
![]()
Обратите внимание на отсутствие скобок после имен функций! Если скобки поставить, то это приведет к немедленному вызову функций, а нам нужно всего лишь связать их имена с соответствующими событиями.
![]()
Как же без этого?
![]()
Как же мы можем обойтись при создании ролловера без предварительной загрузки картинок. В нашем случае она будет выглядеть так:
![]()
var img1=new Image() img1.src="image.gif";
var img2=new Image() img1.src="image2.gif";
![]()
По аналогии добавить ваши собственные картинки.
![]()
Теперь можете добавлять сколько угодно картинок на страницу, не загромождая ее большим количеством повторяющегося кода. Перспективные улучшения:
1) Проверка, а нужно ли изменять картинку;
2) Изменение картинки при нажатии на нее мышью (onMouseDown).
![]()
P.S. Вы можете скачать этот пример.
![]()
Вверх
Сайт: http://www.frnet.narod.ru/
Итак, наша задача — создать скрипт, который бы менял картинку при наведении на нее курсора мыши. Это достаточно стандартная задача и каждый ее решает по-разному. Если у вас есть скрипт, решающий данную проблему, то не спешите закрывать данную статью, так как я предлагаю вам, на мой взгляд, самый оптимальный пример данной программы.
С чего начнем?
Первое, с чего нужно начать — это подготовка рисунков. Для этого вы должны создать два рисунка: первый рисунок — это изображение кнопки в обычном состоянии, без курсора мыши над ним, назовем его image.gif, хотя название можете дать любое; второй — это изображение кнопки в момент, когда над ним находится курсор мыши, назовем его image2.gif. В любом случае вы должны к названию второго изображения прибавлять перед расширением «2» — это одно из условий работы скрипта.
Функция смены картинки при наведении мыши.
Мы приготовили несколько пар рисунков. Если вы создаете целую панель из картинок, то имеет смысл написать универсальную функцию, не привязанную к какому-то конкретному объекту. Этим мы сейчас займемся.
Вначале функция должна определить источник события. Для этого мы будем использовать свойство объекта window.event – srcElement. В последующем нам придется часто обращаться к нему, поэтому первой строкой запишем присваивание его переменной, например, a:
var a=windows.event.srcElement;
Так как событие onMouseOver вызывается не только элементом <img>, то мы выполним проверку: вызывается ли оно нужным элементом. Если да, то функция продолжает выполняться:
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-документ, при помощи тега <img src="image.gif">. Вырезает первые 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() { var 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); }
Присваивание функций событиям.
Для работы функций нужно связать их имена с событиями следующим образом:
document.onmouseover=change1;
document.onmouseout=change2;
Обратите внимание на отсутствие скобок после имен функций! Если скобки поставить, то это приведет к немедленному вызову функций, а нам нужно всего лишь связать их имена с соответствующими событиями.
Как же без этого?
Как же мы можем обойтись при создании ролловера без предварительной загрузки картинок. В нашем случае она будет выглядеть так:
var img1=new Image() img1.src="image.gif";
var img2=new Image() img1.src="image2.gif";
По аналогии добавить ваши собственные картинки.
Теперь можете добавлять сколько угодно картинок на страницу, не загромождая ее большим количеством повторяющегося кода. Перспективные улучшения:
1) Проверка, а нужно ли изменять картинку;
2) Изменение картинки при нажатии на нее мышью (onMouseDown).
P.S. Вы можете скачать этот пример.
Вверх
» Новые книги
PHP3 для Windows
Авторы: Bob Silva
Размер: 60,9 КБ
Скачать: здесь
Спецификация HTML 4.0 (перевод)
Авторы: Dave Raggett, Arnaud Le Hors, Ian Jacobs
Размер: 402 КБ
Скачать: здесь
Работа с Flash 5
Автор: неизвестен
Размер: 474 КБ
Скачать: здесь
Вверх
Авторы: Bob Silva
Размер: 60,9 КБ
Скачать: здесь
Спецификация HTML 4.0 (перевод)
Авторы: Dave Raggett, Arnaud Le Hors, Ian Jacobs
Размер: 402 КБ
Скачать: здесь
Работа с Flash 5
Автор: неизвестен
Размер: 474 КБ
Скачать: здесь
Вверх
» Разделы сайта
На нашем сайте (http://www.frnet.narod.ru/) имеются слудующие разделы:
![]()
![]()
Вверх
- Статьи - статьи о web-дизайне и web-программировании
- Скрипты - скрипты для web-страниц
- Книги - книги той же тематики
- Программы - программы для верстки и дизайна
- Шаблоны - заготовки для web-страниц
- Рассылка - все выпуски рассылки
- Юмор - анекдоты, афоризмы, смешные истории, работы студентов
- Ссылки - ссылки на другие полезные ресурсы сети
Вверх
» Заключение
Надеюсь, вам понравилась информция в рассылке и вы не будете от нее отписываться. Больше информации можно найти на нашем сайте. Ваши пожелания и критику присылайте на e-mail: alexey-golubev@mail.ru.
![]()
При публикации статей из рассылки или с сайта вам следует подписать автора статьи и действующую ссылку на наш сайт.
![]()
Ответственный за рассылку: Голубев Алексей.
![]()
Вверх
При публикации статей из рассылки или с сайта вам следует подписать автора статьи и действующую ссылку на наш сайт.
Ответственный за рассылку: Голубев Алексей.
Вверх
