How Coordinates are Chosen in an Image Map

Buy Microsoft Expression Web Professional Design Tool | Get Microsoft Expression Web Upgrade | Microsoft Expression Web Upgrade from FrontPage [Any Version]

How Coordinates are Chosen in an Image Map

Saturday, October 06, 2007

When you look at the source code of your HTML image map, you will see something like

<map name="FPMap0" id="FPMap0">
<area href="home.htm" shape="rect" coords="7, 8, 51, 39" />
<area href="faqs.html" shape="rect" coords="58, 9, 90, 40" />
<area href="contact.htm" shape="rect" coords="101, 7, 136, 44" />
</map>
<img alt="Image bar" src="images/image-bar.jpg" style="width:
150px; height: 48px" usemap="#FPMap0" />

The coordinates are chosen on the image. For example, in the above example, the rectangle starts at seven pixels over and eight pixels down. Then it ends are fifty-one pixels over and thirty-nine pixels down. You can see how this is counted using an imaging program, such as Photoshop, Fireworks, GIMP, etc. When you use Frontpage or Expression Web to create the image map, you might not create the rectangle on the starting on the same pixel or ending on the same one. However, understanding some HTML, you can edit the settings and the area elements will be the same.

<map name="FPMap0" id="FPMap0">
<area href="home.htm" shape="rect" coords="7, 9, 51, 40" />
<area href="faqs.html" shape="rect" coords="58, 9, 90, 40" />
<area href="contact.htm" shape="rect" coords="101, 9, 136, 40" />
</map>
<img alt="Image bar" src="images/image-bar.jpg" style="width:
150px; height: 48px" usemap="#FPMap0" />

Changing just a few numbers in the source code will have the area elements on the same row to have your image map a bit more perfect. Now they all start nine pixels down and end at forty pixels over.

If you have questions on how an image map is done in Expression Web or Frontpage, please ask at Expression Web and Frontpage Forum. For HTML / XHTML questions, please ask at the International Webdeveloper's Network.