Tactical Panda Websites - Using Image Maps

	Sign In Sign-Up

Home Page • About Us • Search • Contact Us • Bookmark

	"Helping you to help yourself to the internet!"

Contents

In Brief...

Image Maps (1)

Image Maps

A lot of people get confused by Image Maps, judging by some of the questions I get in my mail. Image Maps are relatively easy, once you get the hang of the theory. The banner above is an image map, each piece of text is a hyperlink to another part of this website. You can tell this by passing your mouse cursor over the words and the arrow changes to a hand.

If you click on one of the links with the left mouse button, but this time hold the left button down instead of instantly releasing it, you will see the link appear as the 'dotted line' I always try hard to disguise in the rest of my links!

If you do this please click the 'Back' button on your browser to get back here!

Anyway, back to the theory. First you need a graphic - simple enough, mine is called 'tpbanner-1.gif', and here it is again without the links.

Normally the HTML would read something like this:

Then we have to add a piece of code (highlighted in red) to give the map a name within the graphic link, in my case I have simply called it '#banner1'. Note the # mark before the map's name, and the instruction to 'usemap=...', this is important!

Now comes the fun part. The map's co-ordinates should be placed at the very end of your webpage, just above the </BODY></HTML> commands. I would also recommend that you may consider using something like Paint Shop Pro to assist you, although it can be done without it - it just makes life easier!

Let's say you want a series of rectangular links (like I have used), the opening line is:

This co-ordinates the map's name (banner1) with the graphic itself, giving it a point of reference to look up.

The next line nominates the shape of the link and its co-ordinates within the banner, for example:

As you can see, the shape is a rectangle (RECT), the link will occupy the space '173,38,250,23' and the link itself goes to 'java.html'.

If you were using Paint Shop Pro, you would have the banner up on your screen, put your cursor arrow on the banner where you want the link to start and read of the 'x-y' co-ordinates. Failing that, here's how you get the co-ordinates manually:

Imagine the banner is made up of a whole chunk of pixels (which of course it is) 468 pixels wide and 63 pixels high. The start of the link is 173 pixels in from the left-hand edge and 38 pixels down from the top. This is the 'x-y' co-ordinates! Knowing that the banner is 468 x 60 pixels, you can begin to get around the idea where 173 x 38 is located.

Now you have to end the link on the opposite side. This is located at co-ordinates '250,23' - 250 pixels in from the left-hand edge, and 23 pixels from the top.

Which gives you a 'clickable' area more or less like this:

After that it's just a case of mapping out the other areas you want to link in a similar fashion, and entire map code looks like this:

Don't forget to end the map with </map>. You can have as many links as you want on your graphic, but don't let them overlap or you wil get some confusing results!

The best way to experiment with maps is to copy my banner at the top of the page onto your computer (right click - 'Save Picture As...'), copy the map co-ordinates above as well then play around with it on your own computer. It will soon become obvious what happens when you start altering the co-ordinates yourself. Remember to change the 'HREF=...' links to something on your own site!

Rectangles aren't the only shape you can use, and we will deal with those on the next page!

[1] [2] [3] [4]

Top

<<< Previous page

Home Page • About Us • Search • Contact Us • Bookmark