Tutorials > Image Mapping using MSPaint

Ever wonder how does people do the clickable links thing on a single image?
Well is actuatly pretty simple ! ^-^

Here's a little tutorial on how to do image mapping using MSPaint
I'll only be doing rectangular mapping =)
Please do not redistribute, edit, or post this tutorial elsewhere without my permission.

Requirements
- You'll need to have basic html knowledge
- Have a text editor (Notepad or any other similar program will do)
- Have your layout image ready and uploaded
- Have your MSPaint open up XD

This will be my layout image (Yup the same one used for the other tutorial)

Okay, let's begin!
First, open up your layout image (or any other image that you want)
- Using the Magnifier tool zoom in about x6 or more


2. Now move your mouse over the starting point [show me]
- look at the status bar, copy down those 2 numbers down
- mine will be 21,90 for the first part
- *These numbers will be the first part of the coords

- If you do not have a status bar go to View > Status Bar [show me]


3. Now hover over to the other end and do the same thing [show me]
- and 116,113 will be my second part =3
- put them togather and you get 21,90,116,113


4. Repeat step 2 and 3 for the rest of the navigation
- which will be 21,125,116,148 for 'You'
- and 21,160,116,183

5. Now using the code below (place it in the <body></body>) <!-- Image Mapping -->
<map name="ImgMap">
Replace the number in purple with yours (in step 3 and 4)
<area shape="rect" coords="21,90,116,113" href="content.php" target="content">
<area shape="rect" coords="21,125,116,148" href="you.php" target="content">
<area shape="rect" coords="21,160,116,183" href="layoutframe.php">
</map>
<!-- Image Mapping End -->

<!-- Your layout Image -->
<img src="centeringIframe-lay.gif" border="0" usemap="#ImgMap">

And you're done! Click here for the finish product
Read the Centering Iframe tutorial for more info about the target="" used above

Rotation / Web ring