How to get HTML map tag coordinates

Written by matthew weeks
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to get HTML map tag coordinates
The coordinates of an HTML tag are located in its dependent tags. (Stockbyte/Stockbyte/Getty Images)

When debugging an image map that is not functioning properly, a problem that you may encounter is a misplaced hot spot. If you don't have a "What You See Is What You Get" editor handy, but you do have a graphical editor and a local copy of the image in question, a simple solution is to view the coordinates of the hotspots and edit them as necessary. You can access these coordinates by viewing the source code of the web page.

Skill level:
Easy

Other People Are Reading

Instructions

  1. 1

    Navigate your web browser to the page containing the image map you wish to examine.

  2. 2

    Right-click on the image in question and view its properties. Take note of the filename of the image.

  3. 3

    Right-click anywhere in the document and select "View Source Code" from the submenu. Search for the filename of the image that you took note of above. When you find the <img> tag that references the filename, take note of the value of the "usemap" element within the tag.

  4. 4

    Search the source code for the value of the "usemap" element you took note of above. You are looking for a <map> tag with a "name" element with that same value.

  5. 5

    Search for the values given for the "coords" elements of the image map's <area> tags. They will be given in the format of "x1,y1,x2,y2" for a rectangular hot spot, where x1 and y1 are the coordinates of the top-left corner, while x2 and y2 are the coordinates of the bottom-right corner of the hot spot (relative to the top-left corner of the image), respectively.

Tips and warnings

  • Coordinates can also be given in the format of "x,y,radius" for a circular hot spot, where x and y specify the centre of the circle relative to the top-left corner of the image and radius is equal to the radius of the hot spot.
  • Coordinates can also be given in the format of "x1,y1,x2,y2,..,xn,yn" for a polygonal hot spot, specifying the x and y coordinates of all of the various points of the polygon.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.