2 wammhj wammhj 于 2015.07.06 11:30 提问

急求!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个回答

showbo
showbo   Ds   Rxr 2015.07.06 11: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";
    }
wammhj
wammhj 回复showbo: 谢谢哈!
2 年多之前 回复
showbo
showbo 回复wammhj: 你的<P class=info>里面没有内容啊。。应该是<P class=info>作者:[美]陆可铎 著 [美]克劳巴 绘 郭恩惠 译<BR>出版日期:2010-11<BR>定价:¥15.00元 </P>,而且p标签不能放到a标签里面,font-size:11px这个在chrome下无效,chrome最小字体是12px,低版本的chrome可以增加html{-webkit-text-size-adjust:none;} 样式,高版本(具体从哪个版本开始不太清楚)的添加这个样式也不行,小于11px都会以12px显示
2 年多之前 回复
wammhj
wammhj image.innerHTML "<A href="#"></A><IMG alt=alt src="images/1.gif" width=70 height=90> <P class=info></P>作者:[美]陆可铎 著 [美]克劳巴 绘 郭恩惠 译<BR>出版日期:2010-11<BR>定价:¥15.00元 <P></P></A>"监视到的值为什么是这样的,那个Class没起作用。。
2 年多之前 回复
wammhj
wammhj 我想问一下,image.innerHTML = "<img src=\"images/" + imagePath + "\" width='70' height='90' alt='alt'>";为什么前面有个\后面有个“\”,而且属性值都变成单引号,不用双引号?
2 年多之前 回复
wammhj
wammhj 太感谢了!!!!!!
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片