Ps: [ Map A Layout ] By Urbxangel24

[standing ovationP]

There seem to be a lot of default layout submissions, and I think that this is because not everyone is familiar with image mapping. It took a while but I prepared a tutorial along with helpful pics to help you on your way to creating a successful image mapped layout! ^_^


1. Make an image for your layout. (remember to save it. I recommend the jpeg format) Be sure to include and area for blogs and a Navigation complete with all of the links needed to guide your readers around the site.
this will be my image:
Click here

2. Prepare your navi. and be ready to image map!
Here is my navi:
Click here

3. Jump to adobe image ready by pressing the "jump to image ready" button
as seen highlighted in the pic:


4.You should now be in image ready with the image you are working with. It should look something like this:


5. Select the "rectangle image map tool" button as seen highlighted in the pic:


6. Guide the tool to surround the parts of the navi you want linked one by one as seen here:

7. Now that you've selected the area, fill in the information in the image map section as seen here:

(The arrow colors will serve as a guide here, look for corresponding colors between arrows and text below)
enter the url of the site you want the person to be directed to when they click that section of the navi.
This isn't to important. I usually select "_self"
Type what you want it to say when the person hovers over this section of the navi.

Repeat these steps with each part of your navi.

8. Click the internet button to view your image through the internet and retrieve your completed code.


9. Your screen should look similar to this one:
Click Here

10. Select and copy the following:

Then paste this coding into your regular style sheet. I usually put it at the buttom
<span style="color:green">[b]
ONLY POST IF YOU HAVE A QUESTION OR SUGGESTIONS IN ADDITION TO THE TUTORIAL.</div>