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:
Other People Are Reading
Navigate your web browser to the page containing the image map you wish to examine.
Right-click on the image in question and view its properties. Take note of the filename of the image.
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.
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.
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.
- 20 of the funniest online reviews ever
- 14 Biggest lies people tell in online dating sites
- Hilarious things Google thinks you're trying to search for