Question

我正在尝试在一个页面上创建多个照片库。我可以让第一个画廊工作，但当我尝试添加第二个画廊时，这些图片都不起作用。有人可以帮助我，看看我错了或错过了什么？谢谢！

HTML：

<div class="gallery" align="center" id="gal1" >
<div class="thumbnails" id="thumb1"  >
<img onmouseover="preview1.src=img1.src" name="img1" src="flower.jpg" alt="" />
<img onmouseover="preview1.src=img2.src" name="img2" src="blue_light.jpg" alt="" />
<img onmouseover="preview1.src=img3.src" name="img3" src="paintwithlight/JPEG/yellow-blue.jpg" alt="" />
<img onmouseover="preview1.src=img4.src" name="img4" src="paintwithlight/JPEG/abstract.jpg" alt="" />
<img onmouseover="preview1.src=img5.src" name="img5" src="paintwithlight/JPEG/angelin.jpg" alt="" />
<img onmouseover="preview1.src=img6.src" name="img6" src="paintwithlight/JPEG/anna.jpg" alt="" />
<img onmouseover="preview1.src=img7.src" name="img7" src="paintwithlight/JPEG/butterfly.jpg" alt="" />
<img onmouseover="preview1.src=img8.src" name="img8" src="paintwithlight/JPEG/clash.jpg" alt="" />
<img onmouseover="preview1.src=img9.src" name="img9" src="paintwithlight/JPEG/craze.jpg" alt="" />
<img onmouseover="preview1.src=img10.src" name="img10" src="paintwithlight/JPEG/dolphin.jpg" alt="" />
<img onmouseover="preview1.src=img11.src" name="img11" src="paintwithlight/JPEG/greenswirl.jpg" alt="" />
<img onmouseover="preview1.src=img12.src" name="img12" src="paintwithlight/JPEG/halfcircle.jpg" alt="" />
<img onmouseover="preview1.src=img13.src" name="img13" src="paintwithlight/JPEG/mindblown.jpg" alt="" />
<img onmouseover="preview1.src=img14.src" name="img14" src="paintwithlight/JPEG/mystic.jpg" alt="" />
<img onmouseover="preview1.src=img15.src" name="img15" src="paintwithlight/JPEG/radiation.jpg" alt="" />
<img onmouseover="preview1.src=img16.src" name="img16" src="paintwithlight/JPEG/rainbow.jpg" alt="" />
<img onmouseover="preview1.src=img17.src" name="img17" src="paintwithlight/JPEG/stuckcircle.jpg" alt="" />
<img onmouseover="preview1.src=img18.src" name="img18" src="paintwithlight/JPEG/swirl.jpg" alt="" />
<img onmouseover="preview1.src=img19.src" name="img19" src="paintwithlight/JPEG/whitelight.jpg" alt="" />
<img onmouseover="preview1.src=img20.src" name="img20" src="paintwithlight/JPEG/zeus.jpg" alt="" />

</div>
<div class="preview1" align="center">
<img name="preview1" src="flower.jpg" alt=""/>
</div>
</div> 



<div class="gallery" align="center" id="gal2" >
<div class="thumbnails" id="thumb2"  >

<img onmouseover="preview2.src=img1.src" name="img1" src="nature/JPEG/apple.jpg" alt="" />
<img onmouseover="preview2.src=img2.src" name="img2" src="nature/JPEG/cig.jpg" alt="" />
<img onmouseover="preview2.src=img3.src" name="img3" src="nature/JPEG/deadflower.jpg" alt="" />
<img onmouseover="preview2.src=img4.src" name="img4" src="nature/JPEG/halfnhalf.jpg" alt="" />
<img onmouseover="preview2.src=img5.src" name="img5" src="nature/JPEG/leaf.jpg" alt="" />
<img onmouseover="preview2.src=img6.src" name="img6" src="nature/JPEG/liveflower.jpg" alt="" />
<img onmouseover="preview2.src=img7.src" name="img7" src="nature/JPEG/mush.jpg" alt="" />
<img onmouseover="preview2.src=img8.src" name="img8" src="nature/JPEG/mushroom.jpg" alt="" />
<img onmouseover="preview2.src=img9.src" name="img9" src="nature/JPEG/pumpkin.jpg" alt="" />
<img onmouseover="preview2.src=img10.src" name="img10" src="nature/JPEG/redflower.jpg" alt="" />
<img onmouseover="preview2.src=img11.src" name="img11" src="nature/JPEG/rocks.jpg" alt="" />
<img onmouseover="preview2.src=img12.src" name="img12" src="nature/JPEG/silo.jpg" alt="" />
<img onmouseover="preview2.src=img13.src" name="img13" src="nature/JPEG/tree.jpg" alt="" />
<img onmouseover="preview2.src=img14.src" name="img14" src="nature/JPEG/tree2.jpg" alt="" />
<img onmouseover="preview2.src=img15.src" name="img15" src="nature/JPEG/tree3.jpg" alt="" />
<img onmouseover="preview2.src=img16.src" name="img16" src="nature/JPEG/water.jpg" alt="" />
<img onmouseover="preview2.src=img17.src" name="img17" src="nature/JPEG/yellowflower.jpg" alt="" />

</div>
<div class="preview" align="center">
<img name="preview2" src="nature/JPEG/apple.jpg" alt=""/>

</div>
</div>

CSS：

.thumbnails img {
    height: 80px;
    border: 4px solid #555;
    padding: 1px;
    margin: 0 10px 10px 0;
}



.thumbnails img:hover {
    border: 4px solid #00ccff;
    cursor:pointer;
}



.preview1 img {
    border: 4px solid #444;
    padding: 1px;
    width: 800px;
}

.thumbnails #thumb2 img {
    height: 80px;
    border: 4px solid #555;
    padding: 1px;
    margin: 0 10px 10px 0;
}



.thumbnails #thumb2 img:hover {
    border: 4px solid #00ccff;
    cursor:pointer;
}



.preview2 img {
    border: 4px solid #444;
    padding: 1px;
    width: 800px;
}

Answer 1

{5}中name标记的<img>属性在HTML5中已过时，不应在制作中使用。
→改为使用data-*属性。
align属性已过时或非标准
→使用style text-align:center;代替
内联JavaScript 使开发难度和代码维护成为一场噩梦 →将JavaScript代码放入<script> ，远离HTML代码。

以下是如何轻松创建多个可悬停式图库的示例：

function hoverGal() {
  var bigID = this.parentNode.dataset.targetid;
  document.getElementById(bigID).src = this.dataset.big;
}

[].forEach.call(document.querySelectorAll("[data-big]"), function(thumb) {
  thumb.addEventListener("mouseenter", hoverGal, false);
});

<div data-targetid="big1">
  <img src="//placehold.it/100x60/0fb" data-big="//placehold.it/360x200/0fb" alt="">
  <img src="//placehold.it/100x60/fb0" data-big="//placehold.it/360x200/fb0" alt="">
  <img src="//placehold.it/100x60/b0f" data-big="//placehold.it/360x200/b0f" alt="">
</div>
<img id="big1" src="//placehold.it/360x200/0fb">

<div data-targetid="big2">
  <img src="//placehold.it/100x60/bf0" data-big="//placehold.it/360x200/bf0" alt="">
  <img src="//placehold.it/100x60/f0b" data-big="//placehold.it/360x200/f0b" alt="">
  <img src="//placehold.it/100x60/0bf" data-big="//placehold.it/360x200/0bf" alt="">
</div>
<img id="big2" src="//placehold.it/360x200/bf0">

通过这种方式，您不会因重复的缩略图名称/ ID或必须发明大量不同的名称而发生碰撞。

html / css中的多个照片画廊

1 个答案: