Search code examples
htmldictionarystylesarea

I need to see an HTML image map area

I am trying to set a map area on my image, but I want it to be an octagon so I really need to see what I'm drawing.

Unfortunately there is not way for me to style the area tag so that I can see where the mapping is taking place. This is making it really difficult for me to draw these areas, I have to follow it with the mouse every time to know where it begins and where it ends.

Is there a better way ? I'm posting this example with a rectangle just to keep things simple, I just want to see it, through a plugin or anything.

<img src="img/myimg.png" usemap="#mapid" />
<map id="mapid" name="mapid">
<area id="myarea" shape="rect" coords="960, 0, 600, 500" href="#"/>
</map>
Solution

  • There are many tools for you to plot the coordinates, and below are four that I usually do.

    1. If using MS Windows, MS Paint shows the coordinates at the status bar.
    2. Use an online tool, for example http://www.image-maps.com/
    3. Use a editor, for example Adobe Dreamweaver
    4. Use FireBug (http://getfirebug.com/)

    Hope that helps :)