Image Maps Coordinates
First of all, read the image maps tutorial. Since that question has been asked pretty often... how do you find the right coords when coding an image map? Of course, the easiest way would be to install a software or do it with your code editor, but if you really want to do it by yourself... Here is my solution. I will use this picture; the areas in red are the areas we want to be clickable.
Remember the code? It's something like this.
<map name="Map">
<!-- BOX 1-->
<area shape="rect" coords="x1, x2, x3, x4" href="page1.htm" alt="" />
<!-- BOX x -->
<area shape="rect" coords="xx, xx, xx, xx" href="page2.htm" alt="" />
</map>
Just like in maths, we will find X1, X2, X3 and X4. Open your image in your graphics editor. Select the area like in this image first, press [ Ctrl + C and Ctrl + N ]. A new document window will pop up, note down the width of the document: it is X1, the height of the document is X2. So now your code will look like this:
<map name="Map">
<!-- BOX 1-->
<area shape="rect" coords="27, 18, x3, x4" href="page1.htm" alt="" />
</map>
Now, X3 and X4 are left. Just like before, select the area like I did above. Because now, you need the pixels from the left to the end of the box and the pixels from the top to the bottom of the box. Press [ Ctrl + C and Ctrl + N ]. A new document window will pop up, note down the width of the document: it is X3, the height of the document is X4. Your first rectangular area is done:
<map name="Map">
<!-- BOX 1-->
<area shape="rect" coords="27, 18, 110, 51" href="page1.htm" alt="" />
</map>
Now, you just have to repeat the process with the two areas left. Your final code should look like this:
<map name="Map">
<!-- BOX 1 (blue)-->
<area shape="rect" coords="27, 18, 110, 51" href="page1.htm" alt="" />
<!-- BOX 2 (red)-->
<area shape="rect" coords="45, 98, 122, 140" href="page2.htm" alt="" />
<!-- BOX 3 (green)-->
<area shape="rect" coords="298, 95, 415, 138" href="page3.htm" alt="" />
</map>
Let's test it! :) Mouse over one, two, three and see if it works!
Hooray, it works. The process is the same for polygonal and circular spots, read carefully the other tutorial and try to apply this one?
Leave a Comment
Works? Doesn't work? Other tips? Please leave a comment! :)