LESSON 11 – IMAGE MAPS

HTML IMAGE MAPS

We have already made a hyperlink with an image. An image map allows us to make links with specific areas in images. An area can be a specified circle, rectangle or polygon.

COORDINATES

All areas are defined by coordinates. In images, the top left corner is at point (0,0).

An area can be a rectangle, a circle or a polygon.

A rectangle is defined by its top left point (x, y) and its bottom right point (x2,y2).

A circle is defined by its center point (x, y) and its radius (r).

A polygon is defined by all its points (x,y).

CREATING AN IMAGE MAP

Creating am image map is fairly simple. All we really have to do is list out all of the areas that will be links.

Here is what this list looks like:

<map id="im">

<area shape="rect" coords="0,0,50,50" href="http://www.google.ca">

<area shape="circle" coords="100, 100, 25" href="http://tsn.ca">

<area shape="poly" cords="200,75, 240,81, 345, 79" href="http://www.canoe.ca">

</map>

You also need to specify in the image tag that you will be using a map.

<img src="cool.gif" usemap="#im">

You need the # symbol in front of the map name.

EXAMPLE – IMAGE MAP

This example is taken from the W3C Schools site. It shows an image map in action. Here is the code:

<img src="planets.gif" width="145" height="126" usemap="#planetmap">

<map id="planetmap">

<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.html">

<area shape="circle" coords="90,58,3" alt="Mercury" href="mercury.html">

<area shape="circle" coords="124,58,8" alt="Venus" href="venus.html">

</map>

Click here to see this in action.

IMAGE MAP GENERATOR TOOLS

Creating the areas can be tedious as you try to guess the coordinates. Instead, you can use an image map generator. It allows you to draw areas on the image and generates the corresponding code.

The following link will bring you to such an online tool: http://www.maschek.hu/imagemap/imgmap.

NOT ONLY FOR LINKS

You don’t have to use image maps as links to other sites. You can create an interactive webpage with them.

Each area in the map can have its own event code (such as mouseover) that will change something on the page.

EXAMPLE

The following example will show an image map adding interactivity to a webpage. Use the View Source option to see the code.

Click here for the example.