Jarred's Image Map


Let's get started. The image map above absolutely works. I checked your page and the links and put them in the appropiate places on the image map. Go ahead and click one if you want to. =o)

You will have to scroll over, I put all the html in one line so you can see how it works instead of it being in multiple lines.

The HTML that was used to make this image map work is below.

<MAP NAME="jarred"> <AREA SHAPE="RECT" COORDS="121,63 175,101" HREF="http://www.geocities.com/Area51/Orion/1212/jarr.html"> <AREA SHAPE="RECT" COORDS="3,4 98,39" HREF="http://www.geocities.com/Area51/Orion/1212/weapons.html"> <AREA SHAPE="RECT" COORDS="2,123 96,161" HREF="http://www.geocities.com/Area51/Orion/1212/creatures.html"> <AREA SHAPE="RECT" COORDS="84, 175 175,208" HREF="http://www.geocities.com/Area51/Orion/1212/abilities.html"> </MAP> <IMG SRC="jarredimagemap.gif" USEMAP="#jarred" ALT="Jarred's Image Map" WIDTH="177" HEIGHT="251" border="0">

You are prolly staring at it going crazy. "Excuse me Gem?!" *smirks*

The last line in the HTML...

<IMG SRC="jarredimagemap.gif" USEMAP="#jarred" ALT="Jarred's Image Map" WIDTH="177" HEIGHT="251" border="0">


This is where Paint Shop Pro comes in. Make sure you have the image opened in PSP. Click "View", Scroll down to "Image Information". A box will pop up. You will see the image area... As you can tell... the Width is 177 and the Height is 251.
That is how you can tell the size of the picture. You put 177 in the width area, and 251 in the height area as you can see in that HTML line above.


Now, these coordinates where the links appear on the picture...

<AREA SHAPE="RECT" COORDS="121,63 175,101" HREF="http://www.geocities.com/Area51/Orion/1212/jarr.html"> <AREA SHAPE="RECT" COORDS="3,4 98,39" HREF="http://www.geocities.com/Area51/Orion/1212/weapons.html"> <AREA SHAPE="RECT" COORDS="2,123 96,161" HREF="http://www.geocities.com/Area51/Orion/1212/creatures.html"> <AREA SHAPE="RECT" COORDS="84, 175 175,208" HREF="http://www.geocities.com/Area51/Orion/1212/abilities.html">

Are you wondering how I got those numbers? in Paint Shop Pro, You will see this in the headers above, (I use Paint Shop Pro 5.01, I don't know what version you have.) It should look like The very middle symbol... the dotted square. Make sure you press that and go onto the picture. Press down and form a square around the word or whatever you want to be a link. Don't let go of the button.. Keep it down and look at the bottom left of the Paint Shop Pro program. You will see this. See the first two set of numbers circled? You better write it down because when you let go of the button on the mouse, That number will disappear. *pain in the ass* As you can tell... the numbers 121,63 and 175,101 are used in the first line of the HTML. For the Weapons link.

<AREA SHAPE="RECT" COORDS="121,63 175,101" HREF="http://www.geocities.com/Area51/Orion/1212/jarr.html">

The HREF part is the url that the link on the picture is taking you to. After you draw the box and get the number. Nothing more is needed. Don't double click it or anything. Heh... Just click the picture elsewhere once and the lines of the box will vanish. ;)

Make sure you have the image map name in the correct places too. As you can tell, I named it "jarred". *smirks* Obvious?

I hoped this helped.... but I bet it confused you even more. ;) That's what I do. The picture at the top sucks, I know I know.. but I rushed through it. =o)