Замена изображения по событию

Vendor · 06.04.2010

Почти доделал оформление сайта в html, но есть одно но.
Кнопки меню созданные в виде изображения имеют обработчик события onclick:

<img src="images/BMenuBar_TO.png" border="0" alt="" style="cursor

ointer" onClick=....>

Но показалось что выглядит не очень интерактивно, Пришла идея подсвечивать кнопки меню методом подмены основного изображения при наведении курсора мышки. Можно это реализовать прописав событие 'onmouseover' ? Или нужно чтото другое?

gor · 06.04.2010

Все просто:

Код:

<img src="рисунок1" onmouseover="this.src='рисунок2'" onmouseout="this.src='рисунок1'" alt=""/>

Это конечно очень спрощеный вариант, но работает,еслм графика для вашей навигации остается статичной, вполне работоспособный вариант.

Важно добавьте,скрипт предзагрузки в контейнер head

Код:

<head><script type='text/javascript' src="preload.js"></script></head>

Код preload.js:
В переменную loadSources вписываете пути к графике, нужной для кеширования.

Код:

 var loadImages=[];
var loadSources=['рисунок1','рисунок2'];
for(var i=0;i<loadSources.length;i++);
{loadImages[i]=new Image();
loadImages[i].src=loadSources[i]}

tigra60 · 06.04.2010

Можно событием onmouseover / onmouseout (для возврата к прежнему состоянию)
А можно CSS - псевдокласс :hover, например:

Код:

.menu_button {bacrground-image:url(btn1.jpg)}
.menu_button:hover {background-image:url(btn2.jpg)}

Тут, правда, нужно мастырить костыли для дядюшки Билли - его гениальное творение принимает :hover только для ссылок (тег А).
Удачи!

Vendor · 19.10.2010

gor сказал(а):
Все просто:

Код:

<img src="рисунок1" onmouseover="this.src='рисунок2'" onmouseout="this.src='рисунок1'" alt=""/>

Это конечно очень спрощеный вариант, но работает,еслм графика для вашей навигации остается статичной, вполне работоспособный вариант.

Важно добавьте,скрипт предзагрузки в контейнер head

Код:

<head><script type='text/javascript' src="preload.js"></script></head>

Код preload.js:
В переменную loadSources вписываете пути к графике, нужной для кеширования.

Код:

var loadImages=[]; var loadSources=['рисунок1','рисунок2']; for(var i=0;i<loadSources.length;i++); {loadImages[i]=new Image(); loadImages[i].src=loadSources[i]}

Спасибо есть еще подвопрос. Както не сразу сообразил. При нажатии на пункт хорошо бы чтобы он заменялся третьим типом картинки - как текуще выбранный. This. как я понял изменяет свойства текущего объекта - для подстветки годится. А вот для Клика и выбора пункта-картинки тут надо перевести в начальное состояние остальные картинки-пункты(снять с них выделения). Что-то типа ресет наверное уже както через document. Как это лучше сделать?

Замена изображения по событию

Vendor

Member

gor

Well-Known Member

tigra60

Спасатель

Vendor

Member

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей