In IE7 there is a flicker when changing an image

Question

I have an IE7 bug. Bascially I have a series of buttons eg.

<ul>
 <li><a href="javascript:;" onmouseover="change_image(image);"  onmouseout="change_image_back();"onclick="stick_with_image();">1</a>
</li>

 <li><a href="javascript:;" onmouseover="change_image(image);"  onmouseout="change_image_back();"onclick="stick_with_image();">2</a>
</li>

 <li><a href="javascript:;" onmouseover="change_image(image);"  onmouseout="change_image_back();"onclick="stick_with_image();">3</a>
</li>
</ul>

When you mouse over a button the image changes and when you go to the next image it changes to that. When you click an image it stays on it and flicks back to it when you mouse out from another button. Simple.

But in IE7 it flicks back when going from one element to an another. I'm pretty sure that this is down to the li 'gap' but there are no gaps in the html. I've tried a combination of mouseout/mouseover on the li and ul element but I'm unsure how to make this work the way I want it to.

Any ideas? Cheers Richard

Here is the code - I've added some returns to help.

    <ul style="float:left;" class="buttonlist">
<li>
<a id="photo_version_control_1" href="javascript:;" 
onmouseover="photo_version_show_after_mouse('/images/gallery/2011/06/lrg/lrg_100597_1297107654.jpg','Another shot of my riverside mandarin;  I just think his colours are so striking.  Thanks to everyone for c/c on Fly Away Peter, really do appreciate the help and advice.  Attempting to upload a V2 showing this little fella in agressive mood to make sure he gets his share of the food on offer.  Hope it appears!  Little late today but it\&#039;s been a busy one.  Going to relax when I get through the next few minutes.  J.','','','',613,862);" 
onmouseout="photo_version_back_to_previous();" 
onclick="photo_version_show_after_click('/images/gallery/2011/06/lrg/lrg_100597_1297107654.jpg');">1</a>
</li>

<li>
<a id="photo_version_control_2" style="margin:0px;" 
href="javascript:;" 
onmouseover="photo_version_show_after_mouse('/images/gallery/2011/06/lrg/lrg_100597_1297108526.jpg','','/photo/mandarin-2-16252498/normal/16252556','','/images/gallery/2011/06/normal/normal_100597_1297108526.jpg',526,802);" 
onmouseout="photo_version_back_to_previous();" 
onclick="photo_version_show_after_click('/images/gallery/2011/06/lrg/lrg_100597_1297108526.jpg');" >2
</a>
</li>
</ul>

Some css

ul.buttonlist {
    margin: 0;
    padding: 3px 0;
    height: 26px;
    line-height: 26px;
    border: 1px solid #cacaca;
    float:left;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background:#f0f0f0 url(/site/buttonlist-bg.jpg) repeat-x center center;
}

.buttonlist li{
    display: inline;
    list-style-type: none;
}


.buttonlist a {
    margin:0px;
    height: 26px;
    display: block;
    font-weight:bold;
    padding: 0 8px  0 7px;
    border-left: 1px solid #cacaca;
    float: left;
}

JS

var photo_version_stick = 0;
var current_version;
var current_link;
var current_link_target;
var current_height;
var current_width;
var current_large_image;
var set_large_value;

function photo_version_show_after_mouse(image,description,link,target,large_image,image_height,image_width){
    //alert(document.getElementById('large_version_photo_link').href);
    current_version = document.getElementById("photo_image_display").style.backgroundImage;

    current_html = document.getElementById('photo_description_text').innerHTML;

    if(document.getElementById('photo_view_large_link')!=null) {
        current_link =  document.getElementById('photo_view_large_link').href;
        current_link_target =  document.getElementById('photo_view_large_link').target;

        document.getElementById('photo_view_large_link_image').href = link;
        document.getElementById('photo_view_large_link').href = link;
    }
    else if(document.getElementById('photo_view_normal_link')!=null) {
        current_link =  document.getElementById('photo_view_normal_link').href;
        current_link_target =  document.getElementById('photo_view_normal_link').target;

        document.getElementById('photo_view_large_link_image').href = link;
        document.getElementById('photo_view_normal_link').href = link;
    }

    current_large_image = set_large_value;

    current_height = document.getElementById('main_gallery_image_protector').style.height;

    current_height = parseInt(current_height);
    current_width = document.getElementById('main_gallery_image_protector').style.width;
    current_width = parseInt(current_width);

    document.getElementById("photo_image_display").style.backgroundImage = "url("+image+")";



    document.getElementById('photo_description_text').innerHTML = description;
    document.getElementById('main_gallery_image_protector').style.height = image_height+'px';

    //document.getElementById('main_gallery_image_protector').style.width = image_width+'px';


    if(target==1) {
        target = "_blank";
    }
    else {
        target = "";
    }


    photo_zoom_remove();

    set_large_value = large_image;
    /*if(large_image!='') { 
        ddpowerzoomer.init(jQuery);
        jQuery('#main_gallery_image_protector').addpowerzoom({largeimage:large_image,imagehref:link,imagehreftarget:target});

    }*/

    if(document.getElementById('photo_view_large_link')!=null) {

        document.getElementById('photo_view_large_link_image').target = target;
        document.getElementById('photo_view_large_link').target = target;       
        li_ob = document.getElementById('photo_view_large_link').parentNode;
        if(document.getElementById('photo_view_large_link').href=='javascript:;') {
            li_ob.className = 'disabled'; 
        }
        else {
            li_ob.className = ''; 
        }
    }


    photo_version_stick = 0;




}
function photo_version_back_to_previous(){

    if(photo_version_stick == 0) {



        document.getElementById("photo_image_display").style.backgroundImage = current_version;



        document.getElementById('photo_description_text').innerHTML = current_html;
        if(document.getElementById('photo_view_large_link')!=null) {
            document.getElementById('photo_view_large_link_image').href = current_link;
            document.getElementById('photo_view_large_link_image').target = current_link_target;
            document.getElementById('photo_view_large_link').href = current_link;
            document.getElementById('photo_view_large_link').target = current_link_target;

            li_ob = document.getElementById('photo_view_large_link').parentNode;
        }
        document.getElementById('main_gallery_image_protector').style.height = current_height+'px';
        //document.getElementById('main_gallery_image_protector').style.width = current_width+'px';

        photo_zoom_remove();


        set_large_value = current_large_image;
        //alert(current_large_image+"mouse out");
        /*if(current_large_image!='') {
            ddpowerzoomer.init(jQuery);
            jQuery('#main_gallery_image_protector').addpowerzoom({largeimage:current_large_image,imagehref:current_link,imagehreftarget:current_link_target});
        }*/


        if(document.getElementById('photo_view_large_link')!=null) {
            if(document.getElementById('photo_view_large_link').href=='javascript:;') {
                li_ob.className = 'disabled'; 
            }

            else {
                li_ob.className = ''; 
            }
        }

    }
}

function photo_version_show_after_click(image_source){
    //alert(document.getElementById('large_version_photo_link').href);
    photo_version_stick = 1;

    document.getElementById("photo_image_display").style.backgroundImage = "url("+image_source+")";
    //modification update link
    if(document.getElementById('modification_download_photo')!=null) {
        document.getElementById('modification_download_photo').href=image_source;
    }
}

I hope that helps.

Answer 1

My guess is that you are not preloading the images so the browser doesn't know what size to make the resulting display until the image is delivered. Hence flicker

Answer 2

Use CSS Sprites, if you can (depends on what the images are of course as it's not always practical). That eliminates the flicker as the image would be preloaded (as mentioned above by JohnO).