Image Mapping - CoreLangs.com

What is Image Mapping

Image Map is a list of coordinates relating to a specific Image that allows users to access different web pages by clicking on different areas of an Image.

Client side Image Mapping

There are two types of Image Maps – Client Side Image Maps and Server side Image Maps. Here we are learning how to a Client Side Image Maps by using HTML. With a client side Image Map, you can specify a list of areas that will be used as the links.

The < map > tag is used to define a client-side Image Map. Inside this tag, you will specify where the clickable areas are with the HTML < area > tag.

<map name="webmap">
  <area shape="rect" coords="138,7,254,36" href="next.html">
</map>

There are three shapes commonly used in Image Maps , they are :

RECT (left, top, right, bottom)

CIRCLE (center-x, center-y, radius)

POLY (x1, y1, x2, y2, .,.)

Sample HTML Image Map

HTML Source Code :

<html>
  <body >
    <img src="image-map.png" width="396" height="44" alt="webmap" usemap="#webmap" />
    <map name="webmap">
      <area shape="rect" coords="7,7,121,36" href="home.html" alt="Home" />
      <area shape="rect" coords="138,7,254,36" href="about.html" alt="About" />
      <area shape="rect" coords="270,7,387,36" href="contactus.html" alt="Contact Us" />
    </map>
  </body>
</html>

If you move the mouse over the images, it will turn into the little pointing hand and when you click the different areas of image ,it will load different html pages according to Image Map.

How to find the image co-ordinates ?

You can easily find the co-ordinates of an image by insert it into an image editor such as Paintbrush, and move the mouse around your desired area , so that you can find its co-ordinates .