How to make a round loupe without Canvas, SVG and VML

There is a magnifying glass on the site of Lebedev’s studio in the section “ Our portrait ” Very handy thing - you can always get closer and look at someone closer. And everyone would be good, but only twitches in IE with terrible force. Apparently, the author approached the solution of the problem without a spark. Lebedev magnifying glass is made on Canvas (for Oper, Safari and Firefox) and VML (for IE).

And here I had a reasonable question: Is it possible to make all this beauty solely by means of HTML4 - without any newfangled bells and whistles (by the way, I myself am a big fan of the newfangled bells and whistles)?
Why do this? First, to solve the problem of hellish brakes in IE. Secondly - to make a solution for old browsers without a canvas. And third, to solve this puzzle.
')
Everything would be much simpler if it were a square magnifying glass. Then we would just move the divchik, and inside it there is a background with a big picture. But since we have a round magnifying glass, we had to come up with just such a thing:


Lupu I stole from Lebedev for the purity of the experiment. In a diva with a green border, I move a large picture of the background, and in a diva with a red border I move a 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 for IE6. He is clearly shocked by the number of divs whose style he needs to change for each iteration of the 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 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 then. It is clear that imageAlphaLoader will not help me here, since it is not able to load only the alpha channel for the selected element. But in conjunction with the filter Chroma - quite to yourself.



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

So. It was possible to solve the puzzle in old-fashioned ways and significantly accelerate the work in IE.

technocat.ru/zoom