1. Самый тупой вариант, это иметь по две картинки и соответсвенно при событии (onmouseover, onmouseout) изменять src у объекта картинки.
Но минусы, что это будет на медленном канале клиента оттормаживать, так как загрузка лишней картинки нужна.
2. Будет работать только в IE. Отъюзать фильтры, вообщем это такой изврат который много чего позволяет делать с картинками (прозрачности, затенения и т.д.), прописывается стилями.
Опять же сделаешь два CSS класса в которых пропишешь эти фильтры, и будешь их по событию менять у картинки.
Подробнее про фильтры читай у микрософта
http://msdn.microsoft.com/workshop/author/filter/reference/reference.aspМожно ими дофига чего, главное не полениться и почитать, примеров там много.
3. Для тонких извращенцев. Делаешь гифовскую картинку 2x2 пикселя, (дальше порядам) первый пиксель белый, второй прозрачный, третий прозрачный, четвертый белый.
Если такой картинкой заполнить фон слоя, который подвинуть над нужной картинкой, то она будет выглядеть белее (меняешь белые пиксели на черные и будет затемнение, извращаясь с цветами решетки можно получить нужный эфект).
ну и вообщем показывать этот слой и убирать на событие, двигая его на нужную картинку.
