Image Mapping

Image mapping. One of the most usefull things I have learned. It will seem confusing and difficult at first, but once you understand it, this will come easy to you!

YOUR CODE
<img src="example.gif" usemap = #example border=0> <map name=example> <area shape=Rect Coords=25,64,29,76 Href="http://mewchew.org"> <area shape=Rect Coords=0,32,15,17 Href="http://mewchew.org"> </map>

Other possible shapes include circle and polygon. Where you see 'area shape=' in the code is where you put your shape. You can have as many different links as you wish.

Now that you have the code, and picked your shapes, we are going to map it! The simplest way for me is to use paint. Open up your image that needs mapped in paint. Next, zoom into where the link will be.


Okay, pretend I have a whole layout on paint. Where 'link' is written, that is what I need to image map off my layout. When you hover over in paint you will notice at the bottom of the screen, numbers. These numbers are your coordinates and will change as you move your mouse. Using the image above as my example, the dotted line represents where the link will be. So, you see my coordinates? They are 4,4,34,18. With that you can now plug it into the code.

Continue this process with all your links. Where it says "example.gif" in the code, replace it with your image URL. You can also change where it says #example and example(in map name) but these two words must always match or your code will not work!

If you have any further questions please feel free to contact me and Ill try to help as best I can ^^