IE7では、画像を変更するとちらつきがあります

Question

IE7のバグがあります。 Bascially私は例えば一連のボタンを持っています。

<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> 

ボタンの上にマウスを置くと、画像が変化し、次の画像に移動するとその画像に変わります。画像をクリックすると、その画像上に残り、別のボタンからマウスを離したときにその画像に戻ります。シンプル。

しかし、IE7では、1つの要素から別の要素に移動したときに、別の要素に移動するときにフリックします。 私はこれが「ギャップ」にあると確信していますが、htmlにはギャップがありません。 私はliとul要素でmouseout/mouseoverの組み合わせを試しましたが、私はこれをどのようにしたいのかわかりません。

アイデア？ 乾杯 リチャード

ここにコードがあります - 私はいくつかのリターンを助けました。

<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> 

いくつかの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; 
    } 
} 

私はそれが役に立てば幸い。

Answer 1

可能であれば、CSSスプライトを使用してください（画像が実際には必ずしも実際のものではないことに依存します）。これにより、画像がプリロードされるので、ちらつきがなくなります（前述のJohnOの説明を参照）。

Answer 2

私が推測することは、イメージが配信されるまで、結果として得られるディスプレイを作るためにブラウザがどのサイズを認識しないようにイメージをプリロードしていないことです。したがって、ちらつき