Imagemaps are fun

Here are some explanations on the basic mechanics behind imagemaps:

W3Schools

How to Create

In order to create an imagemap these resources are always required:

  • an image

  • an HTML <map> tag

  • at least one HTML <area> tag

Each one of these tags has severeal attributes that need to be filled out.

Here is an example:

<img src="example.png" width="145" height="126" alt="Synonym" usemap="#map_name">

<map name="map_name">
  <area shape="rect" coords="0,0,82,126" href="object.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="object_two.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="object_three.htm" alt="Venus">
</map>

Image-Maps

Imagemap Generator

Image Map Weebly