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

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!

Solution

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:

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