HTML: Image Maps Are Easy!

r3dux | March 22, 2010

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Image Map Exercise</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
 
<body>
	<map name="MyImageMap">
		<area shape="circle" coords="84,100,63"	href="javascript:alert('You clicked on Earth!');" title="Earth!" alt="Earth" />
 
		<area shape="rect" coords="197,33, 366,167" href="javascript:alert('You clicked on Space Invaders!');" title="Space Invaders!" alt="Invaders" />
 
		<area shape="poly" coords="468,10, 421,70, 457,122, 450,171, 510,171, 513,125, 524,107, 527,80, 535,65" href="javascript:alert('You clicked on the mighty Gaming Fist!');" title="Gaming Fist!" alt="Fist" />
 
		<!-- You can omit this one if you want the default behaviour for the mouse on the rest of the image to do nothing.. --> 
		<area shape="default"	nohref="nohref" title="Nothing to see here..." alt="Default" />
	</map>
 
	<div align="center">
		<img src="ImageMap.jpg" alt="An example image map" usemap="#MyImageMap" />
	</div>
 
</body>
</html>

Which gives you this:

Earth Invaders Fist

Default
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.

Comments
1 Comment »
Categories
Coding
Tags
, ,
Comments rss Comments rss
Trackback Trackback