Image Maps
If I wanted to make one image have multiple links, I'd use an image map. Here's the image I'll map:
When you map an image, the links are called hotspots. For this image, I'll need three hotspots.
Here's the code for an image map with three hotspots:
If your image has more than three links, simply add extras of this bit of code: <area shape="rect" coords="0, 0, 0, 0" href="link #">
The shape is set to rect for rectangle, but you can also have poly or circle. Those are a bit more complicated, so we'll stick to rectangles. :)
Now, to get the coordinates for the hotspots you'll need to open your picture in Paint. Put your mouse over the upper left corner of the place you want the hotspot.
Look at the bottom right corner of the screen. You should see two coordinates. Mine says 19, 12 so that's what I put for the first two numbers in the first link.
Do the same thing for the bottom right corner of the section you want to make into the hotspot.
Here is our progressing code:
Now all that's left is to repeat the above steps for any other hotspots you want to map.
Here's the full code I achieved:
Your image map will have different coordinates than mine (unless you use this same image as practice) but that's the basic idea. :)
Here's the image map in action:
