html图片重叠鼠标点击更换,html实现点击预览图切换图片方法

1.javascript实现的效果

循环浏览所有图像，并为每个图像插入一个元素thumb-bar，将图像嵌入页面中。

将onclick处理程序附加到每个内部，thumb-bar

以便在单击它们时在displayed-img 元素中显示相应的图像。

将onclick处理程序附加到，以便在单击该处理程序时将变暗效果应用于完整尺寸的图像。再次单击它时，再次消除了暗化效果。

2、html、css和javascript协作实现

手动实现了html、css和javascript协作，对关键的部分写了代码注释

2.1、html

照片库

照片库示例

   

     

变暗

2.2 、cssh1 {

font-family: sans-serif;

text-align: center;

}

body {

width: 640px;

margin: 0 auto;

}

.full-img {

position: relative;

display: block;

width: 640px;

height: 480px;

}

.overlay {

position: absolute;