Now, For Image Mapping. First you must make a picture or layout
and add text to it which u would like to be links. I'm going to
use the picture below as an example.
Now, to open this image in PSP7, you go to FILE>EXPORT>IMAGE MAPPER.
Once open, you should see a window like this, only without the
red markings. Those are there to give you visuals to guide you
while I explain how to do this.
STEP #1: You hit the zoom button and position it around the correct
part of the layout that you are currently going to work on.
STEP #2: You move over to where it says tools and you select
the shape of tool that best fits the link shapes in your
layout. I chose the rectangle tool as u see above.
STEP #3: You take the tool and drag out the shape completely
around the words that you want for your first link.
STEP #4: You enter the URL of where u want the link to go
once they click on the part that is currently selected in
GREEN on ur layout. The alt text and target are NOT very
important. Alt text is when you put ur mouse over a link
and a little box pops up with words. Such as this for ex:
And target is where u want the link to end up. I suggest
you just leave the target blank unless it is a link to another
page, or a guestbook or something that u want to open in a new
browser when they click on it. In that case you would enter
_blank in the target space. Otherwise, leave it alone.
STEP #5: Thats it, now all you do is continue steps 1-4 over
again until you have completed all the links you wanted.
STEP #6: Then u go down to "SAVE AS" and it will ask you to save twice.
That is perfectly normal! The first time it is saving an .htm
document and the second time it is saving the pic as a .jpg or
.gif file depending on what you saved it as.
STEP #7: Go to a server such as BlackPlanet, MiGente, Boomspeed,
Liquid2k, etc... and upload the picture or layout there. Once you
have done so, get the url of the layout and then open your html
editor such as notepad. if you don't know how to open notepad,
here is an ex. below. You go to START>PROGRAMS>ACCESSORIES>NOTEPAD
STEP #8: Then once you have nopepad open, you hit file and then open.
When the window pops up you go to where it says files of types and
select all files. Then you find the htm file that you saved in the
image map by looking for the files with the Internet Explorer Icon and
the file name which u chose to save it as and select it and hit open.
Example Below:
STEP #9: Now, once you have it open, you should see something similar to
the example below, again without the blue and red which i will explain:
Now, all you worry about is what is in the red. Everything above and
below the red rectangle u can delete. All u need is what's INSIDE the
red rectangle. So basically all u need if from where it begins with
STEP #10: Now, you leave everything between
and
Now, where u see the blue in the parenthasis it says the file name of
the image u mapped. What you do now is replace the "example.jpg" with
the full url from the site where u uploaded the layout at. for example:
"example.jpg" would be "http://liquid2k.com/username/example.jpg"
then once you did that u hit the space bar once and add the style code
which will position the layout in the correct place. The style code is:
style="position:absolute;top:0px;left:0px"
so now the whole line should look something like this:
migente or blackplanet personal message box at the VERY TOP so that
everything you position after that (divs, tables, etc..) will show up
ON TOP and Not below the layout. and thats it.
WOOO!! U're Done...