Jack Nilan         HTML Tutorial        EMail : jacknilan@yahoo.com

Creating Image Maps (You can click on different parts)
  • First we have to have a picture we want to make an ImageMap out of.

    With this picture we can click on a name and then will be sent to that web site.

  • So we have to find the dimensions of their area within the picture. The top left corner of IBM is 40,13 - find this by looking in PhotoShop - Select Window - Show Info - hit the little triangle - Palette Options - Ruler Units - Pixels. The bottom right corner is 160,53.

    In Gimp to show the Mouse locations from the image menu go to : Windows -> Dockable Dialogs -> Pointer. You will then see the pixwl positions change as you move your mouse around the image screen.

  • You can now find the top left corner of the area and the bottom right corner of the area you want to make "clickable"

  • In declaring your image say :

    <img src = "picture.jpg" USEMAP = "#map1">

  • Then declare your map somewhere in the code

    <map name = "map1">
    <area shape="rect" coords="40,13,160,53" href="http://www.ibm.com">
    <area shape="rect" coords="187,13,331,53" href="http://www.yahoo.com">
    <area shape="rect" coords="362,13,530,53" href="http://www.google.com">

  • You can also create polygon (mult-sided shapes). There is no limit to the number of points you can use in the polygon Map. You just select different points on the outside of the figure (like a face) and thenput them in the coords lisr.

    <area shape="polygon" coords="19,44,45,11,87,37,82,76,49,98" href="http://www.trees.com/save.html">

  • You can also do circles.

    <area shape="circle" coords="68,211,35" href="http://www.trees.com/plantations.html">

    With the circle you name the center of the circle and then the diameter.