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:

Which gives you this:

Earth Invaders Fist

An example image map

The different area type parameters break down like this:

  • circle area type: centre x coordinate, centre y coordinate, radius
  • rectangle area type: top-left x coordinate, top-left y coordinate, bottom-right x coordinate, bottom-right y coordinate
  • polygon area type: just a series of x and y coordinates

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.

Photoshop Units And Rulers

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

One thought on “HTML: Image Maps Are Easy!”

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.