Brightening an image using styles or Javascript

Question

I would like to brighten an image on my webpage on mouseover using css or javascript. Ive seen some examples using opacity and filters in styles but they dont seem to work for m

Answer 1

You could use CSS sprites. Create 2 versions of the image: one normal, one bright and combine them into 1 image using Photoshop or whatever you use.

There's a good explanation of what CSS sprites are here.

Of course, this may not be something you could use on your site. For example, it's probably not something you'd want to use on large images (they'd double in size). You also couldn't do it this way if the images you want to brighten come from outside sources or are uploaded by users for example. It would work well for things like navigation bar images and other UI elements.