html - 使用 onclick 设置带有字幕的图片库

Question

我正在尝试为图库类中的图片添加标题。我使用的代码如下。显示图片时效果很好，但我不知道如何将图片标题合并到该代码中。我需要什么样的字幕代码？

<div class="gallery" align="center">
    <div class="thumbnails">
        <img onclick="preview.src=harlaxton.src" name="harlaxton" src="harlaxton.jpg"   alt="" />
        <img onclick="preview.src=harlaxton2.src" name="harlaxton2" src="harlaxton2.jpg" alt="" />
        <img onclick="preview.src=london.src" name="london" src="london.jpg" alt="" />
        <img onclick="preview.src=londonroad.src" name="londonroad" src="londonroad.jpg" alt="" />
        <img onclick="preview.src=mathbridge.src" name="mathbridge" src="mathbridge.jpg" alt="" />
        <img onclick="preview.src=ireland.src" name="ireland" src="ireland.jpg" alt="" />
        <img onclick="preview.src=cliffs.src" name="cliffs" src="cliffs.jpg" alt="" />
        <img onclick="preview.src=scotland.src" name="scotland" src="scotland.jpg" alt="" />
    </div>
    <div class="preview" align="center">
        <img name="preview" src="harlaxton.jpg" alt=""/>
    </div>

Answer 1

您可以使用 <div>并给出 position像这样:

.preview {position: relative; width: 150px;}
.preview img {display: block;}
.caption {position: absolute; bottom: 0; left: 0; right: 0; text-align: center; background-color: rgba(0,0,0,0.25); padding: 5px;}

<div class="gallery" align="center">
  <div class="thumbnails">
    <img onclick="preview.src='//placehold.it/150?text=Big-1'; caption.innerHTML=this.name;" name="Image 1" src="//placehold.it/50?text=1" alt="" />
    <img onclick="preview.src='//placehold.it/150?text=Big-2'; caption.innerHTML=this.name;" name="Image 2" src="//placehold.it/50?text=2" alt="" />
    <img onclick="preview.src='//placehold.it/150?text=Big-3'; caption.innerHTML=this.name;" name="Image 3" src="//placehold.it/50?text=3" alt="" />
    <img onclick="preview.src='//placehold.it/150?text=Big-4'; caption.innerHTML=this.name;" name="Image 4" src="//placehold.it/50?text=4" alt="" />
    <img onclick="preview.src='//placehold.it/150?text=Big-5'; caption.innerHTML=this.name;" name="Image 5" src="//placehold.it/50?text=5" alt="" />
    <img onclick="preview.src='//placehold.it/150?text=Big-6'; caption.innerHTML=this.name;" name="Image 6" src="//placehold.it/50?text=6" alt="" />
    <img onclick="preview.src='//placehold.it/150?text=Big-7'; caption.innerHTML=this.name;" name="Image 7" src="//placehold.it/50?text=7" alt="" />
    <img onclick="preview.src='//placehold.it/150?text=Big-8'; caption.innerHTML=this.name;" name="Image 8" src="//placehold.it/50?text=8" alt="" />
  </div>
  <div class="preview" align="center">
    <img name="preview" src="//placehold.it/150?text=Big-1" alt=""/>
    <div class="caption" id="caption">Image 1</div>
  </div>
</div>

但正确的方法是使用<figure>和 <figcaption> :

.preview {position: relative; width: 150px;}
.preview img {display: block;}
.caption {position: absolute; bottom: 0; left: 0; right: 0; text-align: center; background-color: rgba(0,0,0,0.25); padding: 5px;}

<div class="gallery" align="center">
  <div class="thumbnails">
    <img onclick="preview.src='//placehold.it/150?text=Big-1'; caption.innerHTML=this.name;" name="Image 1" src="//placehold.it/50?text=1" alt="" />
    <img onclick="preview.src='//placehold.it/150?text=Big-2'; caption.innerHTML=this.name;" name="Image 2" src="//placehold.it/50?text=2" alt="" />
    <img onclick="preview.src='//placehold.it/150?text=Big-3'; caption.innerHTML=this.name;" name="Image 3" src="//placehold.it/50?text=3" alt="" />
    <img onclick="preview.src='//placehold.it/150?text=Big-4'; caption.innerHTML=this.name;" name="Image 4" src="//placehold.it/50?text=4" alt="" />
    <img onclick="preview.src='//placehold.it/150?text=Big-5'; caption.innerHTML=this.name;" name="Image 5" src="//placehold.it/50?text=5" alt="" />
    <img onclick="preview.src='//placehold.it/150?text=Big-6'; caption.innerHTML=this.name;" name="Image 6" src="//placehold.it/50?text=6" alt="" />
    <img onclick="preview.src='//placehold.it/150?text=Big-7'; caption.innerHTML=this.name;" name="Image 7" src="//placehold.it/50?text=7" alt="" />
    <img onclick="preview.src='//placehold.it/150?text=Big-8'; caption.innerHTML=this.name;" name="Image 8" src="//placehold.it/50?text=8" alt="" />
  </div>
  <figure class="preview" align="center">
    <img name="preview" src="//placehold.it/150?text=Big-1" alt=""/>
    <figcaption class="caption" id="caption">Image 1</figcaption>
  </figure>
</div>