Rumah > hujung hadapan web > html tutorial > 鼠标经过小图显示大图和详细信息_html/css_WEB-ITnose

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-06-24 12:20:37
asal
1392 orang telah melayarinya

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


                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="/static/imghw/default1.png"  data-src="1.png"  class="lazy"   id="ImgOut"   style="max-width:90%" / alt="鼠标经过小图显示大图和详细信息_html/css_WEB-ITnose" ><br /><hr /><img  src="/static/imghw/default1.png"  data-src="01.png"  class="lazy"   id="a1"  / alt="鼠标经过小图显示大图和详细信息_html/css_WEB-ITnose" ><!--把你的图片路径放上--> <img  src="/static/imghw/default1.png"  data-src="02.png"  class="lazy"   id="a2"   / alt="鼠标经过小图显示大图和详细信息_html/css_WEB-ITnose" >  <img  src="/static/imghw/default1.png"  data-src="03.png"  class="lazy"   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>
Salin selepas log masuk


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

变成

标题


价格


访问量


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

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

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan