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에서는 한 요소에서 다른 요소로 이동하면 가 표시됩니다. 나는 이것이 '격차'에 이르기까지 있다는 것을 확신하지만 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

제 생각 엔 브라우저가 이미지를 전달할 때까지 결과 디스플레이를 만들 수있는 크기를 알지 못하도록 이미지를 미리로드하지 않았을 것입니다. 따라서 깜박임