wammhj 2015-07-06 03:30 采纳率: 100%
浏览 1864
已采纳

急求！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>
  • 写回答

1条回答

  • Go 旅城通票 2015-07-06 03:48
    关注

    字符没有闭合，而且最好不要直接引用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";
    }
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像，如何解决？