在IE7中，更改图像时会出现闪烁

时间：2011-02-07 12:50:50

标签： javascript internet-explorer internet-explorer-7

我有一个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的组合，但我不确定如何按照我想要的方式进行这项工作。

有什么想法吗？ 干杯 理查德

这是代码 - 我添加了一些返回来帮助。

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

我希望有所帮助。

2 个答案:

答案 0 :(得分：2)

我的猜测是，您没有预加载图像，因此浏览器在图像传送之前不知道生成显示的大小。因此闪烁

答案 1 :(得分：2)

如果可以，请使用CSS Sprites（取决于图像当然是什么，因为它并不总是实用）。这可以消除闪烁，因为图像会被预加载（如JohnO上面提到的那样）。

相关问题
最新问题