Для этого можно использовать традиционный метод - использовать два варианта значка (обычный и затемненный) и с помощью скрипта организовать их замену друг на друга при наведении и уходе курсора мыши. Однако такое устройство страницы приведет к тому, что на страницу придется
поместить еще и сценарий для предварительной загрузки картинок (иначе соответствующие варианты значков будут загружаться лишь при наведении мыши, т. е. - не сразу). Кроме того, при сохранении web-страницы на локальном диске посетителя иконки, загружаемые в сценариях, не копируются на жесткий диск, и в итоге во время работы пользователя с сохраненной страницей при наведении курсора мыши иконки будут заменяться на белые "дырки", что, естественно, не может считаться удачным решением.
Однако для достижения требуемого эффекта вполне можно обойтись и одним изображением, если использовать так называемые "фильтры" - воспринимаемые браузером команды, позволяющие особым образом преобразовать изображение или текст, к которым они применяются.
a img:hover { filter:alpha(opacity=50); ..-opacity:0.5; opacity:0.5; -khtml-opacity:0.5; }
Исходный код этого примера:
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=''; }
|