The JavaScript class ClippedImage.class.js modifies a standard <IMG> tag by clipping it to some specified dimensions and displaying the full image on the mouseover event.
The solution works well for single images and should degrade gracefully in unsupprted browsers. It has been tested in Firefox 2, IE6 and Opera 9.
View this example for for details on how to implement the expanding clipped image effect. Rollover the image below to see the effect in action:
I produced this in an attempt to replicate a flash style animation a client pointed out to me at: http://www.trafficbroker.co.uk/clients.php
I was able to replicate the general ‘feel’ of the flash version, however a css z-index bug in IE thawted my attempts to correctly make a table of clipped images without some images appeared above others. I may at some point attempt to create a table-like layout using CSS and a single relative container which would solve this issue.
This is the table attempt if anyone cares to offer a solution to the IE6 zIndex bug.
UPDATE
- Managed to overcome the IE bug by setting explicitly the z-index of each clipped image’s parent element.
- This is a List example