程式師世界 >> 編程語言 >> 更多編程語言 >> 編程綜合問答 >> java cript-急求！js實現鼠標停留在鏈接側邊圖片隨著鏈接出現不同圖片和簡介

java cript-急求！js實現鼠標停留在鏈接側邊圖片隨著鏈接出現不同圖片和簡介

編輯：編程綜合問答

急求！js實現鼠標停留在鏈接側邊圖片隨著鏈接出現不同圖片和簡介

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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">
.board{ width:426px; height:150px; border:3px solid #e7e7e6; overflow:hidden; border-radius:5px; margin-top:16px; background:#fff; color:#797979; padding-top:10px;}
.board a{ color:#797979; line-height:18px;}
.board h1{ color:#363636; font-size:14px; font-family:"微軟雅黑"; text-align:center; background:url(images/board.jpg) no-repeat; width:180px; margin:0 auto; padding-left:15px;}
ul.board_l,ul.board_r{ float:left; margin:10px 0 0 10px;}
ul.board_l li,ul.board_r li{font-size:12px;background:url(images.png) no-repeat; width:95px; height:18px; line-height:18px; padding-left:16px; padding-top:2px; overflow:hidden;text-overflow: ellipsis-word;}
ul.board_l li a:hover{ color:#e74a29;}
ul.board_r li a:hover{ color:#e74a29;}
.hot{ float:left; width:182px; height:100px; overflow:hidden;text-overflow: ellipsis-word; margin:10px 0 0 0; line-height:20px; padding-top:4px; }
.hot img{ float:left; margin-right:10px;}
.hot p{color:#e74a29;}
ul.board_r{ float:left;}
.info{font-size:11px}


</style> 
<script>
function show(imagePath){ 
//document.getElementById("image").innerHTML="<a href="+xsph2.html+">";
image.innerHTML="<img src=\""images/+imagePath+" "+width='70'+" "+height='90'+"\">";
image.innerHTML="<p class='info'>";
image.innerHTML="作者：XXXX<br /></p>"; 
image.innerHTML="</a>"; 
image.style.display="block";
oldimage.style.display="none"; 
} 


function HideDiv(){
image.style.display="none";
oldimage.style.display="inline";
}
//--></Script>


</head>


<body>
<center>
<div class="board">
<h1>銷售排行</h1>
<ul class="board_l">
<li><a href="xsph2.html" title="aaaaa" onmouseover="show('1.gif')" onmouseout="HideDiv()">1.aaaaa</a></li>
<li><a href="#" title="bbbbb">2.bbbbb</a></li>
</ul>
<div id="oldimage" class="hot"> <a href="#"><img src="images/0.gif" width="70" height="90" />
<p class="info">作者：XXXX<br/>
</p>
</a> </div>
<div id="image" class="hot" style="display:none"></div>
</div>
</div>
</body>
</html>

最佳回答：

字符沒有閉合，而且最好不要直接引用id，而是通過documetn.getElementById來獲取

     function show(imagePath) {
        //document.getElementById("image").innerHTML="<a href="+xsph2.html+">";
        var image = document.getElementById('image'), oldimage = document.getElementById('oldimage');
        image.innerHTML = "<img src=\"images/" + imagePath + "\" width='70' height='90' alt='alt'>";
        image.innerHTML += "<p class='info'>";
        image.innerHTML += "作者：XXXX<br /></p>";
        image.innerHTML += "</a>";
        image.style.display = "block";
        oldimage.style.display = "none";
    }


    function HideDiv() {
        var image = document.getElementById('image'), oldimage = document.getElementById('oldimage');
        image.style.display = "none";
        oldimage.style.display = "inline";
    }