Софт для Windows    Программы для смартфонов и планшетов, мобильный софт    Софт для Линукс, Unix, Linux
 

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

Веб-мастеру | 09:57 26 ноября

Итак, наша задача создать скрипт, который бы менял картинку при наведении на нее курсора мыши. Это достаточно стандартная задача и каждый ее решает по-разному. Если у вас есть скрипт, решающий данную проблему, то не спешите закрывать данную статью, так как я предлагаю вам, на мой взгляд, самый оптимальный пример данной программы.

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

Первое, с чего нужно начать это подготовка рисунков. Для этого вы должны создать два рисунка: первый рисунок это изображение кнопки в обычном состоянии, без курсора мыши над ним, назовем его 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 вызывается не только элементом <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); }

Юзабилити сайта без особых затрат
Наверное, все знают, что от юзабилити сайта зависит очень многое. Причем особенно большую роль обеспечение удобства для посетителей играет для интернет-магазинов и других веб-проектов, оказывающих платные услуги. Ведь в том случае, когда человек вынужден платить деньги, он вправе выдвигать большие требования к продавцу
Какую CMS выбрать для будущего проекта, коммерческую или бесплатную?
На написание этой статьи меня подтолкнул один мой друг, который пытался меня убедить, что под любой проект всегда можно и даже лучше найти бесплатную CMS. Я с ним не согласен полностью. И в этой статье я хотел бы поделиться с Вами своей точкой зрения по этому вопросу - какие проекты можно создавать на бесплатной CMS, и какие проекты лучше строить на базе коммерческой. Кто не знает, CMS это система управления контентом, или по другому еще движок для сайта
Flash – Простые движения
Эта статья прежде всего рассчитана на начинающих Flash-аниматоров, и подразумевает наличие знаний основных Flash-понятий и интерфейса программы. Здесь я постараюсь рассказать об основных способах создания анимации. Анимация это последовательность сменяющих друг друга графических изображений (кадров). Помимо графических изображений, Flash-анимация также может быть оформлена звуковым сопровождением, но это тема отдельного разговора

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

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

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;

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

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

<a href="http://ww.frnet.narod.ru/article.html" target=_blank><img src=article.gif border=0 alt="Статьи на http://www.frnet.narod.ru/" width=235 height=84></a><br>
<a href="http://ww.frnet.narod.ru/script.html" target=_blank><img src=script.gif border=0 alt="Скрипты на http://www.frnet.narod.ru/" width=235 height=84></a><br>
<a href="http://ww.frnet.narod.ru/" target=_blank><img src=more.gif border=0 alt="Перейти на http://www.frnet.narod.ru/" width=235 height=84></a><br>

Заключение.

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

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

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

Автор: Алексей Голубев
Источник: http://www.frnet.narod.ru/


 

Последние новости

Разошлись в ценностях В сообществе разработчиков Drupal разгорелся скандал из-за ухода одного из его старейших участников, занимавшегося запуском крупных OSS-проектов, Ларри Гарфилда (Larry Garfield)
Расплата за невнимательностьЭкономия на системах электронной безопасности может привести к существенным финансовым и репутационным потерям...
Российский рынок смартфоновПо итогам 2016 г. Россия заняла первое место по объемам поставок смартфонов в регионе, включающем в себя Европу, Ближний Восток и Африку (ЕБВА)...
Стотысячная партия 'Байкалов' Компания 'Байкал электроникс' запустила крупносерийное производство своих процессоров Baikal-T1. На мощностях тайваньской компании TSMC (от англ...
на основе сверхвысокомолекулярного полиэтилена. Отмечается, что впоследствии эти импланты помогут обеспечить полную замену костного дефекта...

Блог о софте

AVG 2013 Christmas Collection Mega Pack Final Version-FL | 761 MBAVG 2013 Christmas Collection Mega Pack Final VersionYou Have a Complete Collection of AVG 2013 SoftwareMega Pack Contains:AVG Antiviru
О программе:Zoner Photo Studio Pro - приложение, созданное для качественной обработки цифровых снимков...
Sophos Virus Removal Tool - антивирусный сканер проведет диагностику вашего ПК на наличие вирусов, программ-шпионов, руткитов и поддельных антивирусов и удалит их...
Photo Collage Max – программа, которая создает фотоколлажи. Так же создает альбомы, календари и т.п. Содержит в себе множество шаблонов, фигур, масок, фоторамок...
Дизайн Календарей - это доступная и удобная программа для создания красивых календарей с фотографиями на любой год или месяц...