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)
Base Image	Preferred rollover 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
Solution 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 <pre> <code> <style> .imgStyle{width:200px ; height:200px ; border:1px solid #000000; } .tableStyle{width:900px ; border:1px solid #000000; } textarea.noshow { width: 800; height: 100; display: block;} </style> <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script> <table class="tableStyle" > <tr><td colspan="3" align="center"> <h1>Image RollOver - Demo</h1> </td></tr> <tr align="center" height="300px"> <td width="33%" valign="center"> <img class="imgStyle" style="display:none;" id='myid1' onMouseOut="javascript:toggleImageMouseOut('img1','myid1' , 'myAltId1');" src='http://www.beautyheaven.com.au/product_images/28607/im_1-2.jpg' onerror="handleError(this);" /> <img class="imgStyle" style="display:block;" id='img1' src='http://www.semichem.co.uk/images/product/large/3149.jpg' onMouseOver="javascript:toggleImageMouseIn('img1','myid1' , 'myAltId1');" /> <img class="imgStyle" style="display:none;" id='myAltId1' onMouseOut="javascript:toggleImageMouseOut('img1','myid1' , 'myAltId1');" src='https://docs.google.com/open?id=0B_jnlfhC9eF0QUpic0d0S0otVFE' onerror="handleError(this);" /> </td> <td width="33%" valign="center" > <img class="imgStyle" style="display:none;" id='myid2' onMouseOut="javascript:toggleImageMouseOut('img2','myid2' , 'myAltId2');" src='ttp://www.beautyheaven.com.au/product_images/28607/im_1-2.jpg' onerror="handleError(this);" /> <img class="imgStyle" style="display:block;" id='img2' src='http://www.semichem.co.uk/images/product/large/3149.jpg' onMouseOver="javascript:toggleImageMouseIn('img2','myid2' , 'myAltId2');" /> <img class="imgStyle" style="display:none;" id='myAltId2' onMouseOut="javascript:toggleImageMouseOut('img2','myid2' , 'myAltId2');" src='https://docs.google.com/open?id=0B_jnlfhC9eF0QUpic0d0S0otVFE' onerror="handleError(this);" /> </td> <td valign="center" > <img class="imgStyle" style="display:none;" id='myid3' onMouseOut="javascript:toggleImageMouseOut('img3','myid3' , 'myAltId3');" src='ttp://www.beautyheaven.com.au/product_images/28607/im_1-2.jpg' onerror="handleError(this);" /> <img class="imgStyle" style="display:block;" id='img3' src='http://www.semichem.co.uk/images/product/large/3149.jpg' onMouseOver="javascript:toggleImageMouseIn('img3','myid3' , 'myAltId3');" /> <img class="imgStyle" style="display:none;" id='myAltId2' onMouseOut="javascript:toggleImageMouseOut('img3','myid3' , 'myAltId3');" src='https://docs.google.com/open?id=0B_jnlfhC9eF0QUpic0d0S0otVFE' onerror="handleError(this);" /> </td> <td> </tr> <tr> <td> Scenario 1 : If all images are found, first preferred image will be black creme box </td> <td> Scenario 2 : The first preferred image not found at online src, second preferred image - white creme box </td> <td> Scenario 3 : None alternate images found , no toggle </td> </tr> <tr><td colspan="3"> <div id="brokenImg"> </div> <div id="correctImg"> </div> </td></tr> </td></tr> </table> <script type="text/javascript"> function showWidth(ele, w, id) { $("#"+id).text("The height for the " + ele + " is " + w + "px."); } function handleError(elem){ $('#'+elem.id).height(0); //showWidth("image", $('#myid').attr('height') , "brokenImg"); } function toggleImageMouseOut(img , altImg , altToggleImg) { var altImgEle=$('#'+altImg).height(); //showWidth(altImg, $('#'+altImg).attr('height') , "brokenImg"); var altToggleImgEle = $('#'+altToggleImg).height(); //showWidth("altToggleImg", $('#'+altToggleImg).attr('height') , "correctImg"); if(altImgEle > 0){ document.getElementById(altImg).style.display = "none"; document.getElementById(img).style.display = "block"; } if(altImgEle == 0 && altToggleImgEle > 0) { document.getElementById(altToggleImg).style.display = "none"; document.getElementById(img).style.display = "block"; } } function toggleImageMouseIn(img , altImg , altToggleImg) { var altImgEle=$('#'+altImg).height(); //showWidth(altImg, $('#'+altImg).attr('height') , "brokenImg"); var altToggleImgEle = $('#'+altToggleImg).height(); //showWidth("altToggleImg", $('#'+altToggleImg).attr('height') , "correctImg"); if(altImgEle > 0){ document.getElementById(altImg).style.display = "block"; document.getElementById(img).style.display = "none"; } if(altImgEle == 0 && altToggleImgEle > 0) { document.getElementById(altToggleImg).style.display = "block"; document.getElementById(img).style.display = "none"; } } </script> </code> </pre>
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