title: multiple photo galleries in html/css
body: <p>I am trying to create multiple photo galleries on one page. I can get the first gallery to work but when I try to add a second gallery neither of the pictures work. Could someone help me out and see what I have wrong or am missing? Thank you!</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="gallery" align="center" id="gal1" &gt;
  &lt;div class="thumbnails" id="thumb1"  &gt;
  &lt;img onmouseover="preview1.src=img1.src" name="img1" src="flower.jpg" alt="" /&gt;
  &lt;img onmouseover="preview1.src=img2.src" name="img2" src="blue_light.jpg" alt="" /&gt;
  &lt;img onmouseover="preview1.src=img3.src" name="img3" src="paintwithlight/JPEG/yellow-blue.jpg" alt="" /&gt;
  &lt;img onmouseover="preview1.src=img4.src" name="img4" src="paintwithlight/JPEG/abstract.jpg" alt="" /&gt;
  &lt;img onmouseover="preview1.src=img5.src" name="img5" src="paintwithlight/JPEG/angelin.jpg" alt="" /&gt;
  &lt;img onmouseover="preview1.src=img6.src" name="img6" src="paintwithlight/JPEG/anna.jpg" alt="" /&gt;
  &lt;img onmouseover="preview1.src=img7.src" name="img7" src="paintwithlight/JPEG/butterfly.jpg" alt="" /&gt;
  &lt;img onmouseover="preview1.src=img8.src" name="img8" src="paintwithlight/JPEG/clash.jpg" alt="" /&gt;
  &lt;img onmouseover="preview1.src=img9.src" name="img9" src="paintwithlight/JPEG/craze.jpg" alt="" /&gt;
  &lt;img onmouseover="preview1.src=img10.src" name="img10" src="paintwithlight/JPEG/dolphin.jpg" alt="" /&gt;
  &lt;img onmouseover="preview1.src=img11.src" name="img11" src="paintwithlight/JPEG/greenswirl.jpg" alt="" /&gt;
  &lt;img onmouseover="preview1.src=img12.src" name="img12" src="paintwithlight/JPEG/halfcircle.jpg" alt="" /&gt;
  &lt;img onmouseover="preview1.src=img13.src" name="img13" src="paintwithlight/JPEG/mindblown.jpg" alt="" /&gt;
  &lt;img onmouseover="preview1.src=img14.src" name="img14" src="paintwithlight/JPEG/mystic.jpg" alt="" /&gt;
  &lt;img onmouseover="preview1.src=img15.src" name="img15" src="paintwithlight/JPEG/radiation.jpg" alt="" /&gt;
  &lt;img onmouseover="preview1.src=img16.src" name="img16" src="paintwithlight/JPEG/rainbow.jpg" alt="" /&gt;
  &lt;img onmouseover="preview1.src=img17.src" name="img17" src="paintwithlight/JPEG/stuckcircle.jpg" alt="" /&gt;
  &lt;img onmouseover="preview1.src=img18.src" name="img18" src="paintwithlight/JPEG/swirl.jpg" alt="" /&gt;
  &lt;img onmouseover="preview1.src=img19.src" name="img19" src="paintwithlight/JPEG/whitelight.jpg" alt="" /&gt;
  &lt;img onmouseover="preview1.src=img20.src" name="img20" src="paintwithlight/JPEG/zeus.jpg" alt="" /&gt;
  
  &lt;/div&gt;
  &lt;div class="preview1" align="center"&gt;
  &lt;img name="preview1" src="flower.jpg" alt=""/&gt;
  &lt;/div&gt;
  &lt;/div&gt; 
  
  
  
  &lt;div class="gallery" align="center" id="gal2" &gt;
  &lt;div class="thumbnails" id="thumb2"  &gt;
  
  &lt;img onmouseover="preview2.src=img1.src" name="img1" src="nature/JPEG/apple.jpg" alt="" /&gt;
  &lt;img onmouseover="preview2.src=img2.src" name="img2" src="nature/JPEG/cig.jpg" alt="" /&gt;
  &lt;img onmouseover="preview2.src=img3.src" name="img3" src="nature/JPEG/deadflower.jpg" alt="" /&gt;
  &lt;img onmouseover="preview2.src=img4.src" name="img4" src="nature/JPEG/halfnhalf.jpg" alt="" /&gt;
  &lt;img onmouseover="preview2.src=img5.src" name="img5" src="nature/JPEG/leaf.jpg" alt="" /&gt;
  &lt;img onmouseover="preview2.src=img6.src" name="img6" src="nature/JPEG/liveflower.jpg" alt="" /&gt;
  &lt;img onmouseover="preview2.src=img7.src" name="img7" src="nature/JPEG/mush.jpg" alt="" /&gt;
  &lt;img onmouseover="preview2.src=img8.src" name="img8" src="nature/JPEG/mushroom.jpg" alt="" /&gt;
  &lt;img onmouseover="preview2.src=img9.src" name="img9" src="nature/JPEG/pumpkin.jpg" alt="" /&gt;
  &lt;img onmouseover="preview2.src=img10.src" name="img10" src="nature/JPEG/redflower.jpg" alt="" /&gt;
  &lt;img onmouseover="preview2.src=img11.src" name="img11" src="nature/JPEG/rocks.jpg" alt="" /&gt;
  &lt;img onmouseover="preview2.src=img12.src" name="img12" src="nature/JPEG/silo.jpg" alt="" /&gt;
  &lt;img onmouseover="preview2.src=img13.src" name="img13" src="nature/JPEG/tree.jpg" alt="" /&gt;
  &lt;img onmouseover="preview2.src=img14.src" name="img14" src="nature/JPEG/tree2.jpg" alt="" /&gt;
  &lt;img onmouseover="preview2.src=img15.src" name="img15" src="nature/JPEG/tree3.jpg" alt="" /&gt;
  &lt;img onmouseover="preview2.src=img16.src" name="img16" src="nature/JPEG/water.jpg" alt="" /&gt;
  &lt;img onmouseover="preview2.src=img17.src" name="img17" src="nature/JPEG/yellowflower.jpg" alt="" /&gt;
  
  &lt;/div&gt;
  &lt;div class="preview" align="center"&gt;
  &lt;img name="preview2" src="nature/JPEG/apple.jpg" alt=""/&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.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;
  }
  </code></pre>