Image Mapping

Image mapping is used to make part of an image clickable. A lot of people use image mapping on layouts for navigation.

Go to this site, which is an online image mapper. Click on the "Choose" button to upload your layout or image. Click Accept and your image should show up under Image.

Click and drag anywhere on the image to draw a rectangle around the area you want to image map. It's okay if you don't make it exactly the right size the first time, because you can edit shapes after you've added them. Click again to complete the rectangle. In the boxes above the image, you can change where you want that part to link to. In the href box, type the URL of the page you want to link to. In the alt box, type whatever you want to show up when you hover over the image mapped area. Continue adding more rectangles to your image. If you want to add a circle or polygon instead, you can do this in the "Rectangle" drop down menu.

Once you're done imagemapping, click on the blue HTML button. Scroll to the bottom of the page and your code will show up underneath the image. Copy and paste the code to your site, and add this to the beginning:

<img src="layout.gif" usemap="#imgmap">

Change layout.gif to your image url and imgmap to whatever is after Map ID in the code generated by the website.