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: 谢谢哈!
大约 3 年之前 回复
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显示
大约 3 年之前 回复
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没起作用。。
大约 3 年之前 回复
wammhj
wammhj 我想问一下,image.innerHTML = "<img src=\"images/" + imagePath + "\" width='70' height='90' alt='alt'>";为什么前面有个\后面有个“\”,而且属性值都变成单引号,不用双引号?
大约 3 年之前 回复
wammhj
wammhj 太感谢了!!!!!!
大约 3 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
js 右侧图片随着鼠标滚动
js效果 右侧图片随着鼠标滚动,如需左右两侧同时滚动的对联广告也可使用!图片关闭独立
JS实现图片切换和数字随图片变换
JS实现图片切换和数字随图片变换 1.添加6个圆形数字超链接,鼠标移动到数字区域,切换到数字对应的图片。 鼠标单击左右箭头时,切换图片的同时,图片对应的数字样式是也选中状态。
JS实现图片跟随鼠标移动
在很多网站上能看到图片跟随鼠标移动的JS特效,其实做法很简单,在这里与大家分享下。 在实现这个特效之前,需要了解JS中一个对象,event(事件对象),对,只需了解这一个对象。它的方法属性我不多说了,想详细了解的童鞋点击这里。 我们用到的只有这个对象的两个属性,clientX与clientY,就是触发当前事件(可能是Click,也肯能是onmousemove等等事件)时鼠标在窗口区域的X,Y坐
js 特效 html 特效 链接图片效果
js 特效 html 特效 链接图片效果 js 特效 html 特效 链接图片效果
js 实现 鼠标放到图片上会显示另外一张图片
js 实现 鼠标放到图片上会显示另外一张图片! 值得下载看看!资源免费,大家分享!!
js实现页面上的图片跟着鼠标箭头移动
实现页面上的图标跟着鼠标一起移动
js 特效 html 特效 多图片飞舞链接
js 特效 html 特效 多图片飞舞链接 js 特效 html 特效 多图片飞舞链接
JS实现鼠标滑过图片的抖动效果
在上网时候发现了这个效果(效果演示地址:http://www.baidu.com/search/baike/usertask/mingmantianxia/). 在鼠标放到图片上, 图片会有个上下抖动的特效。很喜欢这种感觉。在于是摸索了一下,下面是一些步骤。 1、查看源文件,在查看后很纳闷的发现,此页并没有包含那些奖品信息。这样就断定代码在另一个页面中。于是想当然的以为是用的框架连接的
图片生成链接
…………………………比特图片生成链接图片生成链接图片生成链接图片生成链接
鼠标链接热点更换图片
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"