I'm working on a project at the moment where i have two images, one placed ontop of the other, and I would like the bottom image to show through more as the mouse moves over the image, and i need it on a pixel by pixel level, i've tried creating X by Y amount of divs that were 1px by 1px each sharing the same background, but offset the background by their positions so the top image pixels were each a 1px div, so that I could change the opacity of each div on mouseover. Trying this brought my browser to a standstill with so many divs.
Is there a way where I can do this (not in flash) but in a way it will work on all browsers quick enough for it to look smooth and without the browser grinding to a halt?
Most adequate would be a Canvas element. It isn't supported by ALL browsers though, just the real ones. (Internet Explorer added support for Canvas only in version 9).
using an absolute positioned canvas over the image, someone could modify the alpha values of the canvas to let the underlying image "shine trough".
A not production-code example could be this (tested and works in FF7): http://jsbin.com/uxizav/edit#preview