Stu Nicholls | CSSplay | An image magnifier

Sliding scale image magnifier

Rain plays a major role in the hydrologic cycle in which moisture from the oceans evaporates, condenses into clouds, precipitates back to earth, and eventually returns to the ocean via streams and rivers to repeat the cycle again. There is also a small amount of water vapor that respires from plants and evaporates to join other water molecules in condensing into clouds.

The amount of rainfall is measured using a rain gauge. It is expressed as the depth of water that collects on a flat surface, and can be measured to the nearest 0.27 mm or 0.01 in. It is sometimes expressed in litres per square metre (1 liter/m² = 1 mm).

Falling raindrops are often depicted in cartoons or anime as "teardrop-shaped" - round at the bottom and narrowing towards the top - but this is incorrect. Only drops of water dripping from some sources are tear-shaped at the moment of formation. Small raindrops are nearly spherical. Larger ones become increasingly flattened on the bottom, like hamburger buns; very large ones are shaped like parachutes. [1] The shape of raindrops was studied by Philipp Lenard in 1898. He found that small raindrops (less than about 2 mm diameter) are approximately spherical. As they get larger (to about 5 mm diameter) they become more doughnut-shaped. Beyond about 5 mm they become unstable and fragment. On average, raindrops are 1 to 2 mm in diameter. The biggest raindrops on Earth were recorded over Brazil and the Marshall Islands in 2004 - some of them were as large as 10 mm. The large size is explained by condensation on large smoke particles or by collisions between drops in small regions with particularly high content of liquid water.

Source: Wikipedia - The Free Encyclopedia

Information

Using a similar principles to my animations and my drop-down/flyout menus I have produced this gradient image enlarging demonstration.

This uses just one image which is nested 'eleven' deep' in list items to give a variable image magnifier.

Well, it does for non-IE browsers which use the list items for the hover enlarging. But IE has to be hacked into performing the same task by using tables and nested links.

Just move your mouse left or right over the bar chart above the image to see the gradual enlarging of the image.

This works in IE5.5, IE6 and hopefully IE7 final (when released), Firefox, Opera and Safari.

If anyone using other browsers could confirm if this works I would be grateful.

The text has been added to show that the original small size image, which is held in a relative positon div acts as a normal float left image but also acts as an absolute positioned image when enlarged.

The css is held in the source code of the page and requires a separate style for IE. The (x)html is held in the #info div in the body of the source code.

Copyright

You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.