鼠标经过小图显示大图和详细信息_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 12:20:37
原创
1317 人浏览过

我现在要实现一个效果是鼠标滑过小图时显示大图和详细信息,我在网上找了段代码


                CellSpacing="9">
                
                    
                   鼠标经过小图显示大图和详细信息_html/css_WEB-ITnose" id="oimg" alt="" width="100px" height="100px"  style="max-width:90%" />
                   鼠标经过小图显示大图和详细信息_html/css_WEB-ITnose" border="0" width="212px" height="212px">
测试测试测试
                   

                

            
这个实现的效果图如下:(如果看不见图片的就看链接地址)
http://img.my.csdn.net/uploads/201304/16/1366081185_5840.jpg

现在我要在大图下再加上几个详细信息,像名称,价格之类的,就出现问题了
                CellSpacing="9">
                
                   
                   鼠标经过小图显示大图和详细信息_html/css_WEB-ITnose" id="oimg" alt="" width="100px" height="100px"  style="max-width:90%" />
                   鼠标经过小图显示大图和详细信息_html/css_WEB-ITnose" border="0" width="212px" height="212px">

                   

                   ¥
                   

                

            
这个就不行了,效果就成了下面这样
http://img.my.csdn.net/uploads/201304/16/1366081185_6372.jpg

要怎么该才能让它一行一行的按顺序显示呢?


回复讨论(解决方案)


                CellSpacing="9">
                
                    
                   鼠标经过小图显示大图和详细信息_html/css_WEB-ITnose" id="oimg" alt="" width="100px" height="100px"  style="max-width:90%" />
                   鼠标经过小图显示大图和详细信息_html/css_WEB-ITnose" border="0" width="212px" height="212px">
                   

测试测试测试


                   

                
            




这样呢,你这个代码,ie6是不支持

<!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=utf-8" /><title>无标题文档</title><style type="text/css">img {		border:0;		}.over { /*鼠标放入时的样式*/	border:3px #F00  solid;}.out {/*移除时的样式*/	border: #F00 0px solid;}</style></head><body><img  src="1.png" id="ImgOut"   style="max-width:90%" / alt="鼠标经过小图显示大图和详细信息_html/css_WEB-ITnose" ><br /><hr /><img  src="01.png" id="a1"  / alt="鼠标经过小图显示大图和详细信息_html/css_WEB-ITnose" ><!--把你的图片路径放上--> <img  src="02.png" id="a2"   / alt="鼠标经过小图显示大图和详细信息_html/css_WEB-ITnose" >  <img  src="03.png" id="a3" / alt="鼠标经过小图显示大图和详细信息_html/css_WEB-ITnose" ></body><script type="text/javascript">				var x = document.getElementsByTagName("img");		for (var i=0;i<x.length;i++){		x[i].onmouseover = function (){ //鼠标移入时的样式.			this.className="over";	//设置样式			var x = this.id[1]+".png";//拼接图片地址			if(this.id!="ImgOut"){//当前id为大图,就忽略.				var y = document.getElementById("ImgOut");//获取显示图片的地址				y.setAttribute("src",x);//设置图片地址.			}		}				x[i].onmouseout = function (){ //鼠标移出时的样式			this.className="out";	//设置样式		}						}				</script></html>
登录后复制


自己改一下吧。样式可以直接改.在chrome,firefox里面没问题.

变成

标题


价格


访问量


上面三个各自加上自己的链接,但我一加上a href,鼠标还没等指上去这个弹出的层就消失了,这个要怎么改啊?麻烦你了,谢谢!

有没有人知道了啊?帮帮忙啊

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板