Welcome to the IBM Websphere Commerce Hub

Welcome to the IBM Websphere Commerce Hub

Come join me in my journey to explore the various features and capabilities of IBM Websphere Commerce and understand how retailers can benefit from its really cool out-of-box functionality.

Sunday, March 11, 2012

Image Roll Overs and Broken Image Handling

This post is not exactly about WCS. But I have spent several sleepless nights to implement this functionality. Tried a lot of approaches , read a lot of blogs but each approach had some issue or other especially IE! 

Here is an approach to implement the image roll-overs and broken image handling using zero-size handling and jQuery.

This approach works for all major browsers - IE , FF , Chrome , Safari and also saves us from the ugly IE "StackOverFlow" error in IE (which might happen if an infinte loop is accidently due to "onerror" handling of image)

Image Roll Over

Problem Description

Image Rollover functionality are becoming quite common in various web-sites since they kind of put life to your website. They are generally easy to implement and involve changing the source of the img on hover and on mouse out. However , there could be scenarios when the toggle image ( the image to be displayed on mouse hover ) is not available either on the local server or third party image servers such as Scene7. Such scenarios need to be handled. Most often you can use the onerror attribute to assign alternate image from the server to be displayed if the toggle image is not available. The requirement that we have is - There are two preferred images to be shown on toggle. If preferredImage1 is not found , look for preferredImage2. If preferredImage2 is not available , then show the original image (effectively dont toggle)
Original Image
Base Image
Toggle Image
Preferred rollover image
Alternate Toggle Image
Alternate rollover image

Working Demo

Scenario 1 :
If all images are found, first preferred image will be black creme box
Scenario 2 :
The first preferred image not found at online src, second preferred image - white creme box
Scenario 3 :
None alternate images found , no toggle


This solution is based on zero height detection using jQuery for the missing images.
  • We define three image tag - 1. Original or Base Image(display:block) 2. Toggle or First Preferred Image(display:none) 3. Alternate Toggle Image(display:none). Since the src of the images are online and not available in local sever , having the three images preloaded reduces latency time.
  • Since there are possibilities that the toggle images are not available at the image server, we use the "onerror" attribute to explicitly set the height of the image as zero. Please make sure that no "alt" attribute is specified for the toggle images since the height attribute returned will be influenced by the "alt" text.
  • The toggle functions on mouse hover are implemented in such a way that it first checks the height of the first alternate image. If the height is zero , the "display" is set to "none", else "block". Similarly , the height of the next image is checked and the "display" attribute is manipulated. Please Note : The image detection needs to be done using jQuery since the toggle images are hidden by default (display:none). In IE , the height is always returned as zero for hidden image elements even if the image src is available. Hence the toggle functionality does not work as well.
Some other solutions could be dynamically changing the src of the images onerror. However , such an approach may cause the ugly "StackOverflow" errors in IE if two or more images are not available.

Sample Code

Disclaimer: The L'Oreal product images are just used as samples for the demo and this blog in no way endorses any products or websites. The image URLs were returned by the Google Images search results -
  • http://www.semichem.co.uk/images/product/large/3149.jpg
  • http://www.beautyheaven.com.au/product_images/28607/im_1-2.jpg
  • https://docs.google.com/open?id=0B_jnlfhC9eF0QUpic0d0S0otVFE
Author : Neha Das

No comments:

Post a Comment