在IE7中有一個閃爍時更改圖像

我有一個IE7的錯誤。 Bascially我有一系列的按鈕，例如。在IE7中有一個閃爍時更改圖像

<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的組合，但我不確定如何使它按照我希望的方式工作。

任何想法？ Cheers Richard

這是代碼 - 我已經添加了一些返回幫助。

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

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

我希望幫助。

來源

2011-02-07 Richard Housham

這將有助於查看`change_image（）`，`change_image_back（）`和`stick_with_image（）`中涉及的代碼。 – 2011-02-07 12:52:19