Project 4: Photo Gallery with Image Maps

Project 4: Photo Gallery with Image Maps

Time for pictures. A gallery is the classic mid-project: a block of images with captions.

The goals

1. Show three images in a row.
2. Wrap each in a figure with a figcaption.
3. Always describe the image with alt.
4. Level up: make one image an image map with clickable regions.

Gallery skeleton

<section>
  <figure>
    <img src="sunset.jpg" alt="Sunset over the ocean">
    <figcaption>Day one of camp.</figcaption>
  </figure>
  <figure>
    <img src="campfire.jpg" alt="Friends around a campfire">
    <figcaption>Our last night.</figcaption>
  </figure>
</section>

Bonus: an image map

An image map makes different parts of one image clickable:

<img src="map.png" alt="Camp map" usemap="#campsite">
<map name="campsite">
  <area shape="rect" coords="34,44,270,350" href="cabin.html" alt="Cabin">
  <area shape="circle" coords="337,300,44" href="lake.html" alt="Lake">
</map>

Keep in mind

• <img> is void (no closing tag); figure is not.
• Caption text goes inside <figcaption>.
• The usemap attribute must match the <map> name.

Checklist

• [ ] Each image has a faithful alt
• [ ] Each image is wrapped with a caption
• [ ] At least one image is an image map
• [ ] Sections are wrapped in <section>

TL;DR

A gallery = figure + img + figcaption per photo. Add a usemap and <map>/<area> for clickable regions.