滚动图片的问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
img{width:67px;
height:96px;
}
body{
font:12px 宋体, Verdana, Geneva, sans-serif;
background:#ffffff;
margin:0;
padding:0;
text-align:center;
color:#000000;
}
div.div_header{
width:243px;
height:16px;
vertical-align:top;
text-align:left;
font-size:14px;
padding:6px;
}
div.div_top_root{
width:255px;
height:134;
}
#scrollContainer{
margin-left:10pt;
margin-top:2pt;
overflow:hidden;
text-align:left;
}
</style>
</head><body>
<div class="div_top_root">
<div class="div_header">今日新闻</div>
    <div id="scrollContainer" onmouseout="closeAd();">
    <div id="scrollContent">
        
         <table cellpadding="5" cellspacing="0" border="0">
         <tr align="middle">
             <td id="firstCol">
                 <table cellpadding="5" cellspacing="0" border="0">
                    <tr align="middle">
             <td><img src="image/1.jpg" alt="a" onmousemove="javascript:displayDetail(this);" onmouseout="javascript:closeAd();" /></td>
                 <td><img src="image/d.jpg" alt="b" onmousemove="javascript:displayDetail(this);" /></td>
                 <td><img src="image/2.jpg" alt="c" onmousemove="javascript:displayDetail(this);" /></td>
                 <td><img src="image/3.jpg" alt="d" onmouseover="javascript:displayDetail(this);" /></td>
             </tr>
          </table>
                     </td>
                     <td id="lastCol"></td>
                 </tr>
</table>
     </div>
    </div>
</div>
<div id="displayPic"></div>
<script type="text/javascript">
var stopscroll = false;
var scrollContHeight = 95;
var scrollContWidth = 230;
var scrollSpeed = 25;
var scrollContainer = document.getElementById("scrollContainer");
var scrollContent = document.getElementById("scrollContent");
var firstCol = document.getElementById("firstCol");
var lastCol = document.getElementById("lastCol");
lastCol.innerHTML = firstCol.innerHTML;
scrollContainer.style.width = scrollContWidth + "px";
scrollContainer.style.height = scrollContHeight + "px";
scrollContainer.noWrap = true;
scrollContainer.onmouseover = new Function("stopscroll = true;");
scrollContainer.onmouseout = new Function("stopscroll = false;");
function init()
{
scrollContainer.scrollLeft = 0;
setInterval("scrollLeft()",scrollSpeed);
}
init();
function scrollLeft()
{
if(stopscroll == true) return;
currLeft = scrollContainer.scrollLeft;
scrollContainer.scrollLeft += 1;
if(currLeft == scrollContainer.scrollLeft)
{
scrollContainer.scrollLeft = 0;
scrollContainer.scrollLeft +=1;
}
}
</script>
<script type="text/javascript">
function displayDetail(who)
{
var displayPic = document.getElementById("displayPic");
displayPic.style.marginTop = "10px";
displayPic.style.padding = "10px 0px";
displayPic.style.width = "255px";
displayPic.style.height = "134px";
displayPic.style.border = "1px #DCDCDC solid";
displayPic.innerHTML = '<img src = "' + who.src + '" alt="ads" style="width:134px;heitht:193px;"/>';
}
</script>
<script>
function closeAd(event)
{
var oClose = document.getElementById("displayPic");
if(oClose.style.visibility =="hidden")
{
oClose.style.visibility ="visible";
}
else
{
oClose.style.visibility="hidden";
}

}
</script>
</body>
</html>
这个网页当鼠标在图片上是，显示该图片的大图，离开的时候大图不关闭，谁能帮我改一下代码，让鼠标离开图片的时候大图也消失。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

你在closeAd() 方法里吧img大小改回去不就行了PS:jquery 里有hover(over,out) 方法移上和移出 2个方法写好放进去就可以了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ﾎﾞｱ・簧ﾄｵｵ</title>
<style type="text/css">
img{width:67px;
    height:96px;
    }
body{
    font:12px ﾋﾎﾌ・ Verdana, Geneva, sans-serif;
    background:#ffffff;
    margin:0;
    padding:0;
    text-align:center;
    color:#000000;
    }
div.div_header{
    width:243px;
    height:16px;
    vertical-align:top;
    text-align:left;
    font-size:14px;
    padding:6px;
    }
div.div_top_root{
    width:255px;
    height:134;
    }
#scrollContainer{
    margin-left:10pt;
    margin-top:2pt;
    overflow:hidden;
    text-align:left;
    }
</style>
</head><body>
<div class="div_top_root">
    <div class="div_header">ｽﾕﾐﾂﾎﾅ</div>
    <div id="scrollContainer" onmouseout="closeAd();">
        <div id="scrollContent">
        
            <table cellpadding="5" cellspacing="0" border="0">
                <tr align="middle">
                    <td id="firstCol">
                        <table cellpadding="5" cellspacing="0" border="0">
                               <tr align="middle">
                                <td><img src="image/1.jpg" alt="a" onmousemove="javascript:displayDetail(this);" onmouseout="javascript:closeAd();" /></td>
                                <td><img src="image/d.jpg" alt="b" onmousemove="javascript:displayDetail(this);" onmouseout="javascript:closeAd();" /></td>
                                <td><img src="image/2.jpg" alt="c" onmousemove="javascript:displayDetail(this);" onmouseout="javascript:closeAd();" /></td>
                                <td><img src="image/3.jpg" alt="d" onmouseover="javascript:displayDetail(this);" onmouseout="javascript:closeAd();" /></td>
                            </tr>
                         </table>
                     </td>
                     <td id="lastCol"></td>
                 </tr>
            </table>
        </div>
    </div>
</div>
<div id="displayPic"></div>
<script type="text/javascript">
var stopscroll = false;
var scrollContHeight = 95;
var scrollContWidth = 230;
var scrollSpeed = 25;
var scrollContainer = document.getElementById("scrollContainer");
var scrollContent = document.getElementById("scrollContent");
var firstCol = document.getElementById("firstCol");
var lastCol = document.getElementById("lastCol");
lastCol.innerHTML = firstCol.innerHTML;
scrollContainer.style.width = scrollContWidth + "px";
scrollContainer.style.height = scrollContHeight + "px";
scrollContainer.noWrap = true;
scrollContainer.onmouseover = new Function("stopscroll = true;");
scrollContainer.onmouseout = new Function("stopscroll = false;");
function init()
{
    scrollContainer.scrollLeft = 0;
    setInterval("scrollLeft()",scrollSpeed);
}
init();
function scrollLeft()
{
    if(stopscroll == true) return;
    currLeft = scrollContainer.scrollLeft;
    scrollContainer.scrollLeft += 1;
    if(currLeft == scrollContainer.scrollLeft)
    {
        scrollContainer.scrollLeft = 0;
        scrollContainer.scrollLeft +=1;
    }
}
</script>
<script type="text/javascript">
function displayDetail(who)
{
    var displayPic = document.getElementById("displayPic");
    displayPic.style.visibility ="visible";
    displayPic.style.marginTop = "10px";
    displayPic.style.padding = "10px 0px";
    displayPic.style.width = "255px";
    displayPic.style.height = "134px";
    displayPic.style.border = "1px #DCDCDC solid";
    displayPic.innerHTML = '<img src = "' + who.src + '" alt="ads" style="width:134px;heitht:193px;"/>';
}
</script>
<script>
function closeAd(event)
{
        var oClose = document.getElementById("displayPic");
        //if(oClose.style.visibility =="hidden")
        //{
        //    oClose.style.visibility ="visible";
        //}
        //else
        //{
            oClose.style.visibility="hidden";
        //}

}
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ﾎﾞｱ・簧ﾄｵｵ</title>
<style type="text/css">
img{width:67px;
    height:96px;
    }
body{
    font:12px ﾋﾎﾌ・ Verdana, Geneva, sans-serif;
    background:#ffffff;
    margin:0;
    padding:0;
    text-align:center;
    color:#000000;
    }
div.div_header{
    width:243px;
    height:16px;
    vertical-align:top;
    text-align:left;
    font-size:14px;
    padding:6px;
    }
div.div_top_root{
    width:255px;
    height:134;
    }
#scrollContainer{
    margin-left:10pt;
    margin-top:2pt;
    overflow:hidden;
    text-align:left;
    }
</style>
</head><body>
<div class="div_top_root">
    <div class="div_header">ｽﾕﾐﾂﾎﾅ</div>
    <div id="scrollContainer" onmouseout="closeAd();">
        <div id="scrollContent">
        
            <table cellpadding="5" cellspacing="0" border="0">
                <tr align="middle">
                    <td id="firstCol">
                        <table cellpadding="5" cellspacing="0" border="0">
                               <tr align="middle">
                                <td><img src="image/1.jpg" alt="a" onmousemove="javascript:displayDetail(this);" onmouseout="javascript:closeAd();" /></td>
                                <td><img src="image/d.jpg" alt="b" onmousemove="javascript:displayDetail(this);" onmouseout="javascript:closeAd();" /></td>
                                <td><img src="image/2.jpg" alt="c" onmousemove="javascript:displayDetail(this);" onmouseout="javascript:closeAd();" /></td>
                                <td><img src="image/3.jpg" alt="d" onmouseover="javascript:displayDetail(this);" onmouseout="javascript:closeAd();" /></td>
                            </tr>
                         </table>
                     </td>
                     <td id="lastCol"></td>
                 </tr>
            </table>
        </div>
    </div>
</div>
<div id="displayPic"></div>
<script type="text/javascript">
var stopscroll = false;
var scrollContHeight = 95;
var scrollContWidth = 230;
var scrollSpeed = 25;
var scrollContainer = document.getElementById("scrollContainer");
var scrollContent = document.getElementById("scrollContent");
var firstCol = document.getElementById("firstCol");
var lastCol = document.getElementById("lastCol");
lastCol.innerHTML = firstCol.innerHTML;
scrollContainer.style.width = scrollContWidth + "px";
scrollContainer.style.height = scrollContHeight + "px";
scrollContainer.noWrap = true;
scrollContainer.onmouseover = new Function("stopscroll = true;");
scrollContainer.onmouseout = new Function("stopscroll = false;");
function init()
{
    scrollContainer.scrollLeft = 0;
    setInterval("scrollLeft()",scrollSpeed);
}
init();
function scrollLeft()
{
    if(stopscroll == true) return;
    currLeft = scrollContainer.scrollLeft;
    scrollContainer.scrollLeft += 1;
    if(currLeft == scrollContainer.scrollLeft)
    {
        scrollContainer.scrollLeft = 0;
        scrollContainer.scrollLeft +=1;
    }
}
</script>
<script type="text/javascript">
function displayDetail(who)
{
    var displayPic = document.getElementById("displayPic");
    displayPic.style.visibility ="visible";
    displayPic.style.marginTop = "10px";
    displayPic.style.padding = "10px 0px";
    displayPic.style.width = "255px";
    displayPic.style.height = "134px";
    displayPic.style.border = "1px #DCDCDC solid";
    displayPic.innerHTML = '<img src = "' + who.src + '" alt="ads" style="width:134px;heitht:193px;"/>';
}
</script>
<script>
function closeAd(event)
{
        var oClose = document.getElementById("displayPic");
        //if(oClose.style.visibility =="hidden")
        //{
        //    oClose.style.visibility ="visible";
        //}
        //else
        //{
            oClose.style.visibility="hidden";
        //}

}
</script>
</body>
</html>
我再ie8是正常的，你用的什么浏览器
function displayDetail(who)
{
    var displayPic = document.getElementById("displayPic");
    displayPic.style.visibility ="visible";//这个不是让图片显示的吗？
    displayPic.style.marginTop = "10px";
    displayPic.style.padding = "10px 0px";
    displayPic.style.width = "255px";
    displayPic.style.height = "134px";
    displayPic.style.border = "1px #DCDCDC solid";
    displayPic.innerHTML = '<img src = "' + who.src + '" alt="ads" style="width:134px;heitht:193px;"/>';
}
鼠标事件：移入
function displayDetail(who)
{
    var displayPic = document.getElementById("displayPic");
    displayPic.style.visibility ="visible";
    displayPic.style.marginTop = "10px";
    displayPic.style.padding = "10px 0px";
    displayPic.style.width = "255px";
    displayPic.style.height = "134px";
    displayPic.style.border = "1px #DCDCDC solid";
    displayPic.innerHTML = '<img src = "' + who.src + '" alt="ads" style="width:134px;heitht:193px;"/>';
}
鼠标事件：移出
function closeAd(event)
{
        var oClose = document.getElementById("displayPic");
//所以
        //if(oClose.style.visibility =="hidden")
        //{
        //    oClose.style.visibility ="visible";
        //}
        //else
        //{
            oClose.style.visibility="hidden";
        //}

}