Есть ли более простой способ отображать / создавать ролловерные изображения, чем пакетная обработка в Photoshop / Fireworks?

Question

Есть ли более простой способ отображать / создавать ролловерные изображения, чем пакетная обработка в Photoshop / Fireworks?

В идеале это было бы сделано через CSS or Javascript, создавая полупрозрачный белый слой поверх изображения при наведении. В настоящее время у меня есть только Photoshop, обрабатывающий изображения с яркостью + 10%, а все остальное я делаю в Dreamweaver с поиском / заменой.

Было бы неплохо не создавать отдельные ролловеры для каждой картинки. Спасибо!

Answer 1

Используя css, вы можете использовать что-то вроде этого:

#navigation a { 
  background:url(image.png) no-repeat; 
  filter:alpha(opacity=100); 
  opacity: 1 }
#navigation a:hover { 
  filter:alpha(opacity=80); 
  opacity: 0.8 }

Подробнее здесь

Answer 2

С изображениями вам не всегда нужно создавать новое изображение для ролловеров, вы можете отредактировать CSS, чтобы уменьшить непрозрачность элемента:

.myElement
{
   background.image: url(path/to/file/image.png);
}

.myElement:hover
{ 
   filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

Также я думаю, что вам будет полезно посмотретьв спрайты CSS:

1. Спрайты CSS-трюков *
2. Список CSS-спрайтов отдельно
3. Css sprites.com генератор