I need to see an HTML image map area

Question

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>

Dally

I think there are various tools that give you a GUI where you can define imagemap areas. You can probably use such a tool even if you just want to visualize it. – Gaskin

Possible duplicate of how to visualise/debug an imagemap? – Teador

Answer 1

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 :)

Sommelier

I do agree with you that Dreamweaver is at times buggy and may chunk HTML codes which I find it irritating at times. Perhaps the online tool is a better way, though you have to bear with the intentional waiting time owing to advertisements :) – Sommelier

does Firebug really does that !? – Sloth

@FranciscoCorrales Yea :) – Sommelier

can you say how ? or a link as a reference ? – Sloth

Answer 2

I found an online image map editor that will help you:

http://www.maschek.hu/imagemap

Vergievergil

Answer 3

I use the following website to get the coordinates

http://imagemap-generator.dariodomi.de/

<map name="planetmap">

<area alt="facebook" coords="334,280,41" shape="circle" href="https://www.facebook.com/" target="_blank" />

<area alt="Twitter" coords="438,280,41" shape="circle" href="https://twitter.com/" target="_blank" />

<area alt="Gogle Plus" coords="541,280,39" shape="circle" href="https://plus.google.com/" target="_blank" />

<area alt="linkedin" coords="645,280,39" shape="circle" href="https://in.linkedin.com/" target="_blank" />

<area alt="youtube" coords="751,280,41" shape="circle" href="https://www.youtube.com/" target="_blank" />
</map>

For your better I give the link as a reference from there you find what is HTML image map and how can we use it

Image map details

Mccullers

Answer 4

you can wrap the area in a span and style it to get height, width, background, and position.

Dodwell