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

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

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

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

div {width: 72pxheight: 72pxbackground: url(small3.png) no-repeatoverflow: hidden}

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

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

这个可以使用js来帮助完成，给三个不同的按钮都绑定点击事件，对应另外三个div，每个div里面使用img标签引入一张图片（或者做成div的背景也行），三个div的外层再套一个div，用来做遮罩层，开始的时候所有div都隐藏，当点击某一个按钮的时候，遮罩层显示，里面对应的一个div显示，其他两个隐藏，这样就行了啊，还可以借助别人做好的框架，实现的方式很多哦

那就给图片一个onclick事件就可以了，图片按钮无非是点击它的时候会出现一些动作。代码如下：

<script type="text/javascript>

function active(){

alert('图片按钮点击‘)

}

</script>

<img src='...' onclick='active()' />

---