Use Image Maps to Link Parts of your Image

A Sample

Please read through this page to learn about image maps. Complete the activity at the bottom if you are interested, it is not mandatory.

Here is an example of an image that uses an image map (sorry for the image crowding the menu). If you move your cursor over the people in the image you will see that they each link to a different page on Wikipedia. You should also see some tool-tip text with their names.

How it works

There are two components you need for an image with an image-map.

The Image

First you need an image, served on the internet and brought into your web page with the image tag (img) just as you’ve done before. This image will have an additional attribute called ‘usemap’. The attribute ‘usemap’ will have the name or ID of the map you create for the image (note that the pound sign is used in front of the name) – this is the second component of an image with an image-map. Here is an example of what the code for the example above looks like>

<img src="http://courses.olblogs.tru.ca/eddl5131-jan13/files/2013/02/king-churchill-roosevelt.jpg" alt="Roosevelt, Churchill and MacKenzie King at Quebec City" usemap="#people" />

The Map

The second thing you need is to create your map for your image. This is done by adding an element to your web page, after your image, called ‘map’. Your map will need a name – ‘people’ was used for the sample – you will need to use this for the ‘name’ attribute and the ‘id’ attribute (‘name’ will eventually disappear from HTML but ‘id’ will endure). Your map will contain one or more ‘area’ tags. Each ‘area’ tag will contain the attributes ‘shape’ (the type of shape) and ‘coords’ (the coordinates that define your shape)

Your shapes are defined using coordinates on your image measured in pixels from the top-left corner. Using this system 0,0 would mean the top left corner of your image and 10,15 would mean a point 10 pixels to the right of the left border and 15 pixels down from the top of the image. The shapes that you can define are:

• Rectangle: list the coordinates for the top left corner and then the bottom right corner (ie. ‘10,15,25,45’ describes a rectangle 30 pixels wide and 15 pixels high). The rectangle attribute is called ‘rect’.
• Circle: list the coordinates for the centre of the circle and then the radius in pixels (ie. ‘70,60,10’ describes a circle with its centre 70 pixels from the left border and 60 pixels from the top and a radius of 10 pixels, or a diameter of 20 pixels). The circle attribute is called ‘circle’.
• Polygon: list a series of coordinates that describe the outline of your shape (note that the outline will be completed from the last coordinates you list to the first that you list) (ie. ‘10,15,14,16,14,21,9,17’). The polygon attribute is called ‘poly’.

Coordinates in this system are separated by commas but do not require any further separation (though you may use spaces if you like). In a polygon shape the pairs are listed without anyurther definition – if you have an odd quantity of numbers in a polygon shape something’s gone wrong. Here is the map code used for the example above (all the shapes are polygons).

<map name="people" id="people">
<area shape="poly" coords="471, 256, 483, 223, 499, 205, 527, 184, 522, 153, 525, 136, 541, 117, 556, 116, 570, 126, 577, 147, 582, 155, 579, 163, 580, 173, 627, 183, 646, 213, 665, 248, 676, 266, 690, 288, 696, 290, 692, 315, 711, 340, 712, 362, 706, 407, 695, 484, 720, 508, 684, 511, 653, 498, 652, 483, 659, 385, 603, 351, 589, 359, 588, 432, 591, 495, 583, 518, 550, 515, 559, 487, 553, 447, 542, 426, 537, 382, 528, 359, 528, 349, 508, 343, 505, 323, 517, 302, 511, 279, 504, 270" href="http://en.wikipedia.org/wiki/Winston_Churchill" target="_blank" title="Winston Churchill" alt="Winston Churchill" />
<area shape="poly" coords="268, 271, 279, 241, 282, 212, 306, 196, 328, 180, 323, 142, 331, 115, 356, 111, 370, 123, 381, 146, 373, 170, 375, 183, 423, 197, 447, 250, 476, 267, 502, 278, 510, 303, 502, 312, 489, 312, 459, 300, 458, 323, 481, 349, 485, 364, 477, 451, 472, 501, 492, 517, 510, 529, 508, 536, 445, 541, 434, 528, 399, 519, 387, 471, 384, 420, 381, 384, 354, 372, 318, 360, 304, 354, 282, 310, 270, 298" href="http://en.wikipedia.org/wiki/William_Mackenzie_King" target="_blank" title="William L. MacKenzie-King" alt="William L. MacKenzie-King" />
<area shape="poly" coords="75, 255, 85, 191, 97, 164, 149, 145, 165, 80, 193, 68, 217, 74, 228, 89, 233, 123, 236, 135, 226, 158, 210, 170, 239, 187, 257, 267, 263, 293, 258, 309, 320, 469, 352, 512, 351, 526, 323, 526, 302, 520, 292, 570, 276, 576, 251, 566, 237, 548, 237, 529, 228, 505, 220, 486, 198, 436, 183, 395, 171, 373, 106, 367, 96, 360, 88, 320, 76, 282" href="http://en.wikipedia.org/wiki/Franklin_Roosevelt" target="_blank" title="Franklin D. Roosevelt" alt="Franklin D. Roosevelt" />
</map>

So how do I get the coordinates?

One easy way is to use Gimp. If you open an image in Gimp you can find coordinates for the point on the image you currently covered by your cursor in the lower right corner of the emain window. In the image below the cursor (which can’t be seen in the screen shot) is at 108,168 or 108 pixels in from the left border and 168 pixels from the top.

Another way is to use a image map creation tool like the Summer HTML Image Map Creator at
http://summerstyle.github.io/summer/

Try out image maps at the W3Schools page. Just select the ‘Try it yourself’ link.
http://www.w3schools.com/tags/att_img_usemap.asp

You can use image maps for many interactive educational graphics. If you don’t want to link away and just use the tool-tip function you can just put the ‘#’ pound symbol in the href attribute. You can also use the image map shapes to trigger JavaScript events. We won’t go into that here, but if you’d like to see an example just let me know.

Optional Activity

If you have the time, or if you are particularly interested, give creating an image map on a blog post a try. If you get hung up on some aspect of it let me know.

Create an image or find one with a Creative Commons license, or one that is in the public domain, that would be useful if it linked to different web pages from specific areas within the image. This might be a map, a diagram of a process, an item with component parts displayed, your grade 7 class photo.

1. Decide where you want the different parts of the image to links to. Find the URLs for the links and keep them handy in Notepad or some other program.
2. Choose the display size you need for your image. If you need to resize your image or crop it do this before building your image map.
3. Put a copy of your image on your web server (your WordPress Media Library will work). Note the URL for your image and keep it handy in Notepad or another program.
4. Use a tool like Gimp or the Summer HTML Image Map Creator to get the coordinates for each distinct portion of the image you want to link to another web page.
5. Create a blog post and, using the ‘HTML’ tab, create the image tag and image map following the template set out above.
6. Publish your blog post in the EDDL 5131 category and test the links.