HTML Lesson
Advanced Page Building

Imagemaps
Imagemaps, or "clickable images," are spiffy. There aren't any examples of them at the moment. But I/we'll show you how to make them.

First, you have to have a picture to turn into an imagemap. Use this one:

Save it to your own computer by right-clicking and choosing "save picture as..." Now open it in Paint. That's right, Microsoft Paint. The basic graphics program that comes with your computer. We're using Notepad and Paint to make our webpages. Don't argue.

Okay, have the picture open? Notice that the coordinates are shown in the bottom right-hand corner of the screen when you move the cursor over the picture.

When we put the image in Alejandro, we need to specify it as an imagemap. The attribute is usemap="#mapname", and the mapname is whatever you decide to name the map. Let's call our map George. Ready?
<html>
<head>
<title>Alejandro</title>
</head>
<body bgcolor="#000000" text="#CCCC66" link="#999966" vlink="#CC9966" alink="#90EE90">
<font face="Arial" size=4>
<center>

<table border=1 width=25%>
<tr>
<td>Warm</td> <td>Fuzzy</td>
</tr>
<tr>
<td>Cold</td> <td>Prickly</td>
</tr>
</table>

<br>
<br>

<img src="goofyshapes3.jpg" usemap="#george">

</center>
</font>
</body>
</html>
Now Alejandro has an imagemap, but we haven't told it which parts can be clicked on. That's where paint comes in. You need those coordinates that I mentioned. There are several ways to do this.

Rectangles
Rectangles are easy. You only need the coordinates for the top left corner and the bottom right corner. Easy.

Circles
For circles, you need the coordinate of the center of the circle, and the length of the radius of the circle. (The radius is the distance from the center to any point on the edge of the circle. The coordinates are (x,y), so subtract the first x number from the second x number to get the radius).

Polygons
Polygons require the coordinates of each corner, in order. Almost as easy as rectangles.

Now, to use all those lovely coordinates you just wrote down, you'll need the <map></map> tag set. Put it right below the image tag. You'll need to put the mapname attribute in the opening tag; name="george".
<html>
<head>
<title>Alejandro</title>
</head>
<body bgcolor="#000000" text="#CCCC66" link="#999966" vlink="#CC9966" alink="#90EE90">
<font face="Arial" size=4>
<center>

<table border=1 width=25%>
<tr>
<td>Warm</td> <td>Fuzzy</td>
</tr>
<tr>
<td>Cold</td> <td>Prickly</td>
</tr>
</table>

<br>
<br>

<img src="goofyshapes3.jpg" usemap="#george">

<map name="george">

</map>

</center>
</font>
</body>
</html>
In between the map tags, we need to put <area> tags. These are not used in pairs. You need one for each area you want to be able to click on. The format is as follows:
<area shape="rect" coords="x,y,x,y" href="http://www.yourpage.com">
The shapes can be shape="rect", shape="circle", or shape="polygon". Circle coordinates will be coords="x,y,r" where r is the radius. Polygon coordinates will be listed in order around the shape, either clockwise or counterclockwise. For our example, I'll map a rectangle around the words "Sal Devath," and make it link to the homepage.
<html>
<head>
<title>Alejandro</title>
</head>
<body bgcolor="#000000" text="#CCCC66" link="#999966" vlink="#CC9966" alink="#90EE90">
<font face="Arial" size=4>
<center>

<table border=1 width=25%>
<tr>
<td>Warm</td> <td>Fuzzy</td>
</tr>
<tr>
<td>Cold</td> <td>Prickly</td>
</tr>
</table>

<br>
<br>

<img src="goofyshapes3.jpg" usemap="#george">

<map name="george">

<area shape="rect" coords="24,152,99,127" href="http://kansei.dustkitty.net/">

</map>

</center>
</font>
</body>
</html>
Check out Alejandro, then try making clickable areas around each of the shapes. Areas can overlap, so you can use circles and a polygon to map the heart. You could also call it a polygon and map lots and lots of points around the curves. When you overlap areas, the one you list first in your code takes precedence.


And that's that. The lessons didn't continue any further, but this was enough for me to start my site on, and through various means, I've picked up on more.

I'd like to thank Liz, she presented these lessons in a very straightforward fashion that I truly appreciated, and then was kind enough to let me set this up on my page. Thanks again.
          ~Kye


HTML Home     Home     Previous