HTML: Image Maps Are Easy!

I hadn’t made an image map in a long time, and had to revisit them for a class I’m teaching – and they’re well easy! An image map, if you didn’t know, is a method of defining regions of an image which can be used to link to things i.e. you create a series of “hot-spots” on an image. Here’s a simple example of how it works using circle, rectangle and polygon definitions:

To find out the co-ordinates you want to use, it’s easiest to just open the image up in a paint package like the GIMP, and put the mouse cursor over where you want to get the mouse coordinates of – in the GIMP they’re displayed in the status bar at the bottom on the left, in Photoshop you need to open the Info window (shortcut: F8). Note that in Photoshop you might need to change the units from cm or inches or whatnot to pixels via Edit | Preferences | Units & Rulers.

If you want more information, there’s a great tutorial on the topic here.