How to make a circular magnifier without Canvas, SVG and VML

There is a magnifying glass on the website of Lebedev's studio in the " Our Portrait " section . A very convenient thing - you can always zoom in and look at someone closer. And everyone would be good, but only jerks in IE with terrible force. Apparently, the author approached the solution of the problem without a twinkle. Lebedev's magnifier is made on Canvas (for Opera, Safari and Firefox) and VML (for IE).

And then I had a reasonable question: Is it possible to make all this beauty exclusively using HTML4 - without any newfangled bells and whistles (I myself, by the way, am a big fan of newfangled bells and whistles)?
 Why do this? Firstly, to solve the problem of hellish brakes in IE. Secondly - to make a decision for old browsers without a canvas. And thirdly, to solve this puzzle.

Everything would be noticeably simplified if the magnifying glass were square. Then we would just move the divan, and inside it is a background with a large picture. But since we have a round magnifying glass, I had to come up with this kind of thing:


I stole the magnifying glass from Lebedev for the purity of the experiment. In the diva with the green border, I move the big picture to the background, and in the divas with the red border - the small picture. Thus, it turns out that the corners of the “magnifying” diva merge with a small picture. In my opinion, this is what we need.

This solution works everywhere very smoothly and well, except IE6. He is clearly shocked by the number of divs whose style he needs to change for each iteration of mousemove. There is an option to get notes on graph theory and try to reduce the number of red divs, but by experience it became clear that the brakes already start from 10 divs. I doubt that it would be possible to reduce their number to less than 10.

Therefore, we turn to history. In IE there is such a thing as filters. I use them. It is clear that imageAlphaLoader will not help me here, since it is not able to load only the alpha channel for the selected item. But in conjunction with the Chroma filter - quite imagined.



We load this PNG skin with imageAlphaLoader. The white circle is transparent. And then with the Chroma filter, make the black color transparent. Cheers cheers. Everything worked out.

So. It was possible to solve the problem in the old grandfather ways and significantly accelerate the work in IE.

technocat.ru/zoom