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

поместить еще и сценарий для предварительной загрузки картинок (иначе соответствующие варианты значков будут загружаться лишь при наведении мыши, т. е. - не сразу). Кроме того, при сохранении 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='';
}