Is there an easier way to display/create rollover images than batching in Photoshop/Fireworks?

Question

Is there an easier way to display/create rollover images than batching in Photoshop/Fireworks?

Ideally this would be done through CSS or Javascript, somehow creating a semi-transparent white layer over an image when moused over. Currently I just have Photoshop process images with +10% brightness, and do the rest in Dreamweaver with find/replace.

It'd be nice not to have to create separate rollover images for each picture. Thanks!

Answer 1

With images you don't always have to create a new image for rollovers, you can edit the CSS to decrease the opacity of the element:

.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;
}

Also I think you'd benefit from looking into CSS Sprites:

1. CSS-tricks sprites tuorial
2. A list apart's CSS sprites
3. Css sprites.com generator

Answer 2

Using css, you can use something like this:

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

More info here