複数のフォトギャラリーをhtml/cssで

Question

私は1ページに複数のフォトギャラリーを作成しようとしています。私は最初のギャラリーを稼働させることができますが、2番目のギャラリーを追加しようとするとどちらの写真も機能しません。誰かが私を助けて、私が間違っているか紛失しているかを見てもらえますか？ありがとうございました！

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

• <img>タグのname属性は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を持つかを有する衝突に得ることはありませんその方法：

は、ここで簡単に複数のホバリング可能なギャラリーを作成する方法の例ですさまざまな名前のトンを発明した。