html点击小图片浏览大图（html页面里面如何实现点击小图放大查看大图）

本文目录

• html页面里面如何实现点击小图放大查看大图
• 我想要在HTML里面点击一个图片打开一个固定大小的窗口!
• html点击图片跳转页面显示大图
• html点击页面上的小图片弹出大图片（急，急，急）
• 如何用JS/JQ实现，点击小图片显示大图片及详细信息的功能
• HTML,当我鼠标移动到小图片上面的时候，鼠标后面就显示大图片
• css和js怎么控制html点击一张小图片就显示一张大图片
• 求一段html弹窗代码点击一个小图片，网页居中弹出一张大图如图

html页面里面如何实现点击小图放大查看大图

需要准备的材料分别有：电脑、浏览器、html器。

1、首先，打开html器，新建html文件，例如：index.html。

2、在index.html中的《style》标签中，输入css代码：

div {width: 72px;height: 72px;background: url(small3.png) no-repeat;overflow: hidden;}

3、浏览器运行index.html页面，此时成功将矩形图片只显示了正方形部分。

4、点击小图后，成功显示了大图。

我想要在HTML里面点击一个图片打开一个固定大小的窗口!

这个只需要在页面里面放一个隐藏的div就行了。先把这个div的样式什么的定好，position设置为absolute，display设置为none不显示，然后在点击图片之后，设置该div的display为block就可以了。

html点击图片跳转页面显示大图

1、单独静态html网页，无论加什么内容都需要手动一个一个写的，哪怕一个标点也得手动加上。
2、不想一个一个写，那只能通过程序+数据库。把数据存到数据库中，用程序代码批量读出数据库中的数据。比如百度知道，有成几百万上千万个页面，不可能都手工一个一个修改页面的，都是程序。
3、关于《li》标签问题：这个需要些css样式。在页面加上下面代码
《style》
*{margin:0;padding:0;}
li{float:left;list-style:none;text-align:left;display:inline;overflow:hidden;}
《/style》
4、图片问题：页面图片多，最好使用小图（缩略图）。大图影响显示慢，影响用户体验。
5、程序也好，html/css也好，都需要慢慢学习的。只要学就能会。

html点击页面上的小图片弹出大图片（急，急，急）

***隐藏网址***

《html》

 《head》

 《title》 New Document 《/title》

 《link rel="stylesheet" rev="stylesheet"href="style.css" type="text/css" /》

 《script type="text/javascript"》

         functionopenContent(x){

                   document.getElementById("content").style.display="block";

         document.getElementById("content_img").getElementsByTagName("img").alt;

                   document.getElementById("content_img").style.display="block";

         }

         functioncloseContent(x){

                   document.getElementById("content").style.display="none";

                   x.parentNode.style.display="none";

         }

 《/script》

 《style type="text/css"》

         table{width:90%;

                   height:90%;

                   margin:auto;

                   text-align:center;

                   margin-top:20px;}

         #photo{margin:auto;

                   width:1000px;

                   height:678px;

                   border:1pxsolid #ccc;

                   margin:10px;

                   float:left;}

         .photoTitle{height:30px;}

         #content{display:none;

                   position:absolute;

                   width:100%;

                   height:100%;

                   z-index:1;

                   background:#000;

                   top:0px;

                   filter:alpha(opacity=85);}

         #content_img{display:none;

                   position:absolute;

                   z-index:2;

                   width:100%;

                   text-align:center;

                   top:100px;

                   left:0px;

                   }

 《/style》

 《/head》

 《body》

 《div id="top"》《div id="txt"》成功没有早晚《br/》努力就有收获《/div》

 《/div》

 《div id="nav"》

         《ul》

                   《li》《ahref="index.html" target="_self"》首页《/a》《/li》

                   《liclass="bar"》|《/li》

                   《li》《ahref="diary.html" target="_self"》日志《/a》《/li》

                   《liclass="bar"》|《/li》

                   《li》《ahref="photo.html" target="_self"》相册《/a》《/li》

                   《liclass="bar"》|《/li》

                   《li》《ahref="#" target="_self"》留言《/a》《/li》

         《/ul》

 《/div》

 《div id="main"》

         《divid="photo"》

                   《h4》|图片列表《/h4》

                   《table》

                            《trclass="photoTitle"》《td》《ahref="javascript:openContent(0);"》图片《/a》《/td》

                                     《td》《ahref="javascript:openContent(1);"》图片《/a》《/td》

                                     《td》《ahref="javascript:openContent(2);"》图片《/a》《/td》《/tr》

                            《trvalign="top"》《td》《ahref="javascript:openContent(0);"》《imgsrc="img/1.png" title="单击显示大图"alt="img/1.jpg"/》《/a》《/td》

                                     《td》《ahref="javascript:openContent(1);"》《imgsrc="img/2.png" title="单击显示大图" alt="img/2.jpg"/》《/a》《/td》

                                     《td》《ahref="javascript:openContent(2);"》《imgsrc="img/3.png" title="单击显示大图"alt="img/3.jpg"/》《/a》《/td》《/tr》

                            《trclass="photoTitle"》《td》《ahref="javascript:openContent(3);"》图片《/a》《/td》

                                     《td》《ahref="javascript:openContent(4);"》图片《/a》《/td》

                                     《td》《ahref="javascript:openContent(5);"》图片《/a》《/td》《/tr》

                            《trvalign="top"》《td》《ahref="javascript:openContent(3);"》《imgsrc="img/3.png" title="单击显示大图"alt="img/3.jpg"/》《/a》《/td》

                                     《td》《ahref="javascript:openContent(4);"》《img src="img/2.png"title="单击显示大图" alt="img/2.jpg"/》《/a》《/td》

                                     《td》《ahref="javascript:openContent(5);"》《imgsrc="img/1.png" title="单击显示大图"alt="img/1.jpg"/》《/a》《/td》《/tr》

                            《trclass="photoTitle"》《td》《ahref="javascript:openContent(6);"》图片《/a》《/td》

                                     《td》《ahref="javascript:openContent(7);"》图片《/a》《/td》

                                     《td》《ahref="javascript:openContent(8);"》图片《/a》《/td》《/tr》

                            《trvalign="top"》《td》《ahref="javascript:openContent(6);"》《imgsrc="img/2.png" title="单击显示大图"alt="img/2.jpg"/》《/a》《/td》

                                     《td》《ahref="javascript:openContent(7);"》《imgsrc="img/1.png" title="单击显示大图"alt="img/1.jpg"/》《/a》《/td》

                                     《td》《ahref="javascript:openContent(8);"》《imgsrc="img/3.png" title="单击显示大图"alt="img/3.jpg"/》《/a》《/td》《/tr》

                   《/table》

         《/div》

 《/div》

 《div id="content"》《/div》

 《div id="content_img"》

         《imgsrc="" id="img_dis"/》《br/》

         《buttononclick="closeContent(this);" id="content_btn"》关闭窗口《/button》

 《/div》

 《div id="bottom"》

         底部个人信息

 《/div》

 《/body》

《/html》

效果如下：（至于再点击大图后效果消失，你可以把关闭窗口按钮触发的代码改成单击后的代码）

如何用JS/JQ实现，点击小图片显示大图片及详细信息的功能

这个一般是用css来显示特定内容的。
譬如有张图片icon.png，里面有很多内容，便可以在css中这么用。
.sa
{width:20px;
height:20px;
overflow:hidden;
background:url(icon.png)
no-repeat
-20px
-30px;}
注解：
宽度和高度是控制显示范围的
overflow:hidden是确保不会有多余显示
background:url(icon.png)是使用图片作为背景显示，并且也只能作为背景显示才能达到这种做法的目的
no-repeat是不会重复，这个不是必须的，不过有会规范一些
-20px
-30px是图片的定位，显示时会将图片按这个坐标来定位
上面只是针对固定大小的显示内容来定义的，如果大小不固定，在background属性中有可能需要更改设置。不过重点是这种方式是这么使用的。
如果大小不固定，也可以这样定义，让背景自适应：
.sa
{width:auto;
height:20px;
overflow:hidden;
background:url(icon.png)
no-repeat
right
bottom;}
对于图片2(首页标签)的内容，也是这么使用的：
.a
{width:100px;
height:25px;
overflow:hidden;
background:url(2.png)
no-repeat
left
center;}
.a:hover
{background-position:right
center;}
这样一来，当鼠标移到元素时，背景定位发生变化，显示的内容便由左边的变成右边的了。
不过你应该对css这方面还不是很了解，目前可能还没有很便捷的方式对这些css进行快速定义，所以也只能告诉你是这么一回事，但未必能帮得上你。

HTML,当我鼠标移动到小图片上面的时候，鼠标后面就显示大图片

下载一下jquery插件，然后新建一个ToolTip.js文件，在该文件下写入以下代码：
$(function() {
var x = 10;
var y = 10;
$("a.tooltip").mouseover(function(e) {
this.myTitle = this.title;
this.title = "";
var tooltip = "《div id=’tooltip’》《img src=’" + this.href + "’ alt=’产品预览图’ width=’250px’ height=’250px’/》《\/div》"; //创建 div 元素
$("body").append(tooltip); //把它追加到文档中
$("#tooltip")
.css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show("fast"); //设置x坐标和y坐标，并且显示
}).mouseout(function() {
this.title = this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e) {
$("#tooltip")
.css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
});
});
})
//]]》

在页面导入两个.js文件，

《script src="../javascripts/jquery-1.3.1.js" type="text/javascript"》《/script》
《script src="../javascripts/ToolTip.js" type="text/javascript"》《/script》
最后把图片绑定到a标记就可以了：
《a href="《%#DataBinder.Eval(Container.DataItem,"imageBigUrl") %》" class="tooltip"》 //大图片提示
《asp:ImageButton ID="image1" runat="server" ImageUrl=’《%#DataBinder.Eval(Container.DataItem,"imageSmallUrl") %》’ Width="50px" Height="50px" /》《/a》

css和js怎么控制html点击一张小图片就显示一张大图片

第一种方法：
将三张大图放在div里面，这三个div大小还有别的属性都一样，但是默认是隐藏的，
display：none；隐藏
display：block；显示
然后点击一张图片，对应的大图div显示出来，点击第二张，第一个大图div隐藏，第二个大图div显示。
第二种方法，只有一个大的div，里面放《img》标签，但是src也就是路径是空的，然后当你点击第一个小图的时候，给这个img标签的src赋值，也就是第一个大图的路径，点击第二个，路径变更。
第三种，去网上找找这样的源代码，图片轮转。好多源代码 各种样式的都有。
希望能帮助到你

求一段html弹窗代码点击一个小图片，网页居中弹出一张大图如图

• 网页链接

  我给你一个地址，菜鸟教程Javascript这儿有图片弹窗的实例

• 写法挺多的，我写其中一种：

  《script type="text/javascript"》
                   /*弹窗功能*/
              function popup() {
                  var wxb = document.getElementById("wechatBox");//大图
                  wxb.style.display = "block";
              }
                   /*关闭弹窗功能*/
              function closeP() {
                  var wxb = document.getElementById("wechatBox");//大图
                  wxb.style.display = "none";
              }
  《/script》

  html部分给大概的内容：可以用href也可以用onClick，大图默认隐藏
  

  《a href="javascript:popup()"》小图《/a》
  《span onClick="closeP()"》大图右上方关闭按钮《/span》
  《div id="wechatBox" style="display: none;"》大图《/div》