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
In IE7 the last two images do not appear to have this bug.
Comment by Mark — November 6, 2007 @ 7:04 pm
Thanks for your feedback mark, however: The last image does not have the bug, I believe only due to the fact it is the last image and therefore has the highest z-index. The last image does still appear over the second last image, just doesn’t seem that way initially because they are so similar…
Comment by admin — November 14, 2007 @ 8:56 pm