Реклама - здесь может быть Ваша реклама, которую увидят 4000+ человек в сутки. Хотите 1000 посетителей на свой сайт за 50 копеек?

Затенение картинки при наведении с помощью фильтра

Для этого можно использовать традиционный метод - использовать два варианта значка (обычный и затемненный) и с помощью скрипта организовать их замену друг на друга при наведении и уходе курсора мыши. Однако такое устройство страницы приведет к тому, что на страницу придется поместить еще и сценарий для предварительной загрузки картинок (иначе соответствующие варианты значков будут загружаться лишь при наведении мыши, т. е. - не сразу). Кроме того, при сохранении web-страницы на локальном диске посетителя иконки, загружаемые в сценариях, не копируются на жесткий диск, и в итоге во время работы пользователя с сохраненной страницей при наведении курсора мыши иконки будут заменяться на белые "дырки", что, естественно, не может считаться удачным решением.

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

Если вы пожелаете использовать на web-странице фильтры для достижения эффекта затемнения иконок при наведении на них курсора, то следует добавить небольшой скрипт: В результате при наведении курсора мыши на картинку она будет затемняться:

<style>
a img:hover {
filter:alpha(opacity=50); ..-opacity:0.5; opacity:0.5; -khtml-opacity:0.5;
}
</style>

Исходный код этого примера:

<script language="JavaScript">
function g(c,w)	// ссылка на объект и признак вкл/выкл
{
if (w==0) c.style.filter="light()";	// применяем фильтр "light", который окрашивает картинку в определенный цвет...
// и задаем в качестве затемняющего цвета - темно-синий оттенок. 
// Эта команда используется лишь в том случае, когда браузер может работать с фильтрами 
// - именно поэтому она помещена после оператора if, проверяющего, существует ли для браузера фильтр light.
if (w==0) c.filters.light.addAmbient(150,150,150,180);
// Ну а если нужно, наоборот, вернуть картинке первоначальный вид, то просто отменяем все фильтры.
else	c.style.filter='';
}
</script>

В результате при наведении курсора мыши на картинку она будет затемняться:<br>

<a src="/java/ann.jpg"><IMG src="/java/ann.jpg" border=0 width=100 height=147 onMouseover="g(this,0)" onMouseout="g(this,1)" ></a>

Скопировать в буфер

Вышеописанный сценарий можно использовать для всех картинок на странице, для которых вы пожелаете применить эффект "затемнения". Ну а чтобы это происходило - в тэг каждой картинки, для которой требуется "затемнение", следует вставить команды "onMouseover="g(this,0)" onMouseout="g(this,1)".

В результате при наведении курсора мыши на картинку она будет затемняться:

Подробнее можно почитать о статических фильтрах изображений, о динамических фильтрах изображений

- Russian video, free stock