Design an Image Map {1 Picture, Multiple Links}

item1 item2 item3 item4 item5 item6

If you’re the creative type that enjoys making collages for your blog, then this tutorial could help you out! I’m going to go through the steps of creating an image map to attach multiple links to one picture. These can be great tools once you get the hang of it!

Part 1: Create your collage
  • Make a collage with Polyvore, Paint, Photoshop, or whatever it is that you use
  • Keep in mind that you’ll have to link certain areas of your picture, so make sure those areas don’t overlap
  • Re-size your collage to the width you use for your blog pictures (I use 620 px)
Part 2: Find the coordinates

For this next part you’ll need a program that allows you to see the coordinates (x,y) of points on the image in pixels, not inches. I use Photoshop CS6. You’ll want to record the coordinates of the top left corner and the bottom right corner of every rectangle you plan on linking. For example, the coordinates of the rectangle below are (19,112) and (158,258).

coordinates

Part 3: Making the code

Here is the complete code:

1
2
3
4
5
6
7
8
9
10
11
<div>
<IMG USEMAP="#Reviews" SRC="http://MainImage.jpg" BORDER="0">
<MAP NAME="Reviews">
<AREA ALT="item1" SHAPE="rect" HREF="link1" COORDS="x1,y1 x2,y2">
<AREA ALT="item2" SHAPE="rect" HREF="link2" COORDS="x3,y3 x4,y4">
<AREA ALT="item3" SHAPE="rect" HREF="link3" COORDS="x5,y5 x6,y6">
<AREA ALT="item4" SHAPE="rect" HREF="link4" COORDS="x7,y7 x8,y8">
<AREA ALT="item5" SHAPE="rect" HREF="link5" COORDS="x9,y9 x10,y10">
<AREA ALT="item6" SHAPE="rect" HREF="link6" COORDS="x11,y11 x12,y12">
</MAP>
</div>
  • The first part of the code assigns the image to the map
  • The map name in this example is Reviews (you can name it anything you want)
  • You will need to replace the SRC code with the actual SRC code for your image
2
<IMG USEMAP="#Reviews" SRC="http://MainImage.jpg" BORDER="0">
  • The next part connects coordinates & links to the map
  • The map name remains Reviews (this needs to match the name you gave the image above)
  • replace item1 with the name of your item (Sweaters)
  • Replace link1 with the link for your item (http://easypetitelooks.com)
  • Replace the coordinates with your actual coordinates (19, 112 158,258)
  • Repeat these steps for each of the remaining five items (or however many are in your image!)
3
4
5
6
7
8
9
10
<MAP NAME="Reviews>
<AREA ALT="item1" SHAPE="rect" HREF="link1" COORDS="x1,y1 x2,y2">
<AREA ALT="item2" SHAPE="rect" HREF="link2" COORDS="x3,y3 x4,y4">
<AREA ALT="item3" SHAPE="rect" HREF="link3" COORDS="x5,y5 x6,y6">
<AREA ALT="item4" SHAPE="rect" HREF="link4" COORDS="x7,y7 x8,y8">
<AREA ALT="item5" SHAPE="rect" HREF="link5" COORDS="x9,y9 x10,y10">
<AREA ALT="item6" SHAPE="rect" HREF="link6" COORDS="x11,y11 x12,y12">
</MAP>

If you plugged everything in correctly, your image now has the links attached! Enjoy 🙂