HTML » Image maps

Imaps does not longer work on horseland, as they have blocked the code. I've decided to keep this tutorial up anyway, as it might be usefull for real life home pages.

Beneath is a example of a image map, or imap as I'll call it from now on:

If you take a look at the picture above, and move your mouse pointer over the text on the image, you can see how it turns into a hand. That is because the text is made into "hot spots", and if you click on them they work as a link. Try it. You can make anything on a image into a hot spot, not only text. Have a look at the image below:

Again, try hovering over the image. Notice how certain areas works as a link.

You need two things to be able to make these sorts of layouts: a graphics program and the html editor you normally use to create code.

The image

You can make any image you'd like; one with text on, with buttons on or with images on. Keep in mind that the hot spots should be easy to see. I will use the image I showed you above for further work. Save it in a jpg format and upload it to a server. I will use photobucket.com. You can not link the image from your computer. Copy the url, we will use it later.

The coordinates

The hotspots are placed on the image by coordinates. They are inserted in a special type of link, I will show you later. Different types of shapes can be used (remember the rectangle, circle and polygon images). So how do you find the coordinates? Have a look at the image below:

The letters are the coordinates we will use. You can find these by using the graphics program you created the image in. It should have a way of showing the coordinates. Since I use Paint Shop Pro X, I'll give you a tip. Hover over the image in psp, with your mouse pointer. Hover over the corners if it's a rectangle you'd like, the centre if it's a circle (calculate the radius too), and all the corners if it's a polygon. Use the brush tool, and set the size to 1 to get the right point. You should be able to see the coordinates in the bottom left corner of the program. If you can't see them, right click on the top tool bar, so you get a list up:

Make sure "status" is checked. You will see something like this:

The cross shows where I hold the mouse pointer.

The HTML

Now the fun part; the code. Start by adding the imap code:

Then add an entry for each hot spot you want to create:

Replace A, B, C and D with the coordinates. Check out the third picture in the tutorial if you can't remember what was what. All the entries should be inside the map, like this:

"rect" can be changed to circle or polygon:

When you've done, add the last code tag:

usemap can be any name, but it MUST match the map name. Don't forget the # in front of the name in usemap. But instead of changing it and pretending this is your own code, insert a banner with link to this site on you hl page ;) Insert the image url you copied from photobucket. The border="0" is added, so you don't get a ugly neon blue border around your imap picture.

The links

Where I have used "url.htm", you should have links/urls. For the hl navigation, you can insert the link in the code I showed you. When the visitor clicks the hot spot, your site will be replaced with the target. For pop ups, like in my example, where I have "links", you have to use another sort of link. So, for navigation, use this type of link:
<area shape="rect" href="url.htm" coords="A,B,C,D">

And for pop up info sites, use this type of link:
<area shape="rect" coords="A,B,C,D" href="http://www.freewebs.com/username/site.htm" onClick="crush=window.open('http://www.freewebs.com/username/site.htm','popup', 'toolbar=no, location=no, directories=no, statusbar=no,menubar=no, scrollbars=yes, resizable=no, width=400, height=470, left = 30,top = 30');return false;">

The pop up site is created like a regular web site which you upload to a server, like freewebs.com.

The pop up site

As I mentioned, the pop up site - the site that opens when you click the link (like in the example where you click "Links"), is a regular web page. You can make it very simple like this:

Where the code looks like this:

<html>
<head>
<title> Site title></title>
</head>
<body bgcolor="blue">
<center>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="90%" bgcolor="#00FFFF" bordercolor="#000000">
<tr>
<td> Insert header picture, and write stuff here... </td>
</tr>
</table>
</center>
</body>
</html>

Which is just a site with it's starting tags, a 90% wide table with color inside, and borders around, and a background color. You can add CSS to make scroll bar colors and link colors.

You can also make a more advanced site, which contains an image and a scroll box:

The code:

<html>
<head>
<title> Site title</title>
</head>
<body>
<img border="0" src="picture.jpg" align="left">

<div style="position:absolute; top: 110px; left: 215px; width: 287px; height: 339px; overflow:auto; padding: 5px; border: 1px solid black; background-color: white">
<b>the heading you want</b>
Text inside the scroll box
</div>
</body>
</html>

You can add CSS if you want nice scrolls and links. The image it self just looks like this:

The rest is done by code.

The layout

Well, you now know how to make a imap out of a picture. But how do we convert it to a layout? You can think of the imap picture as any other picture. But for it to be able to be a imap, which was sort of the point, you can't insert it in a table as a background. You have to insert it with the img code. So if you want it to be a part of a scroll layout, or a expandie, you have to do this with tables. Let's say I want a scroll box inside the blue box on the picture… If I want to use absolute positioning, to fixate the image and the scroll box, it is very easy. You place the image and the scroll box by adding: style="overflow: auto; position: absolute; left: 0px; top: 0px;" to the img code, and the div code (the scroll). Change the left and top value to place the scroll where you want it. But if you don't want to use absolute positioning, it's more tricky… You'd have to chop the image in two, where you insert the part with the links on with the img tag, and use the rest as a table background. But this isn't a part of making the imap it self, so If you're stuck you should read the table tutorial.