Image map tutorial:

Start with a SIMPLE image [if you are a beginner]

We are just going to work with the orange section for right now.

Look in the corner of PSP and you will see something that says something like Image: 500x300x16 million

Move your mouse over the UPPER LEFT CORNER of the orange area.[or the first image you want to link] In the right corner of PSP you should see something that says (x:0 y:0)--Image: 500x300x16 million.
Write down x:0 Y:0 [or whatever yours is]

Now, move your mouse to the LOWER RIGHT CORNER of the ORANGE AREA. I would say something like x:252 y:150
Write that down

Now move over to the Blueish area
Put your mouse over the UPPER LEFT CORNER of the blue area. Write down x and y coordinates again.

Do the same with the green and purple areas.
REMEMBER: TOP LEFT AND BOTTOM RIGHT!!

For the actual coding
You will need to name your image map something. I'm going to name mine Practice
Make a image source [img src=] put your image url IN QUOTES. Now you will need to add the map name using the code usemap="#mapname" then close it.
Now your next line needs to be map name="yourmapname"

Now find where you wrote down your x and y coordinates [if you ate it well you will have to do it again]
Your shape is a rectangle [which are the easiest image map] So you will be using the code area shape="rect"
next you will need your coords, which go in the order of top left, bottom right That order stays the same. You will have four coordinates for each link.

[No, those are not the actual coords I'm lazy]
Add all the codes together and you should have a image map.

If you didn't understand this or it didn't work, please feel free to contact Brianna Via e-mail.

->Bubblez		->Ruriko
->Riona		->Emily
->Art		->Yelo
->Matt		->Dream
->Mandah		->Marcus
->Viki		->Christine
->Eta		->Ashley
->Kit		->Del

Site

Layout Changer

Other

Friends

Chat

Ads

Ignore

Image map tutorial: