Creating HTML Image Maps
This tutorial is written
and contributed by Nebojsa Pajkic.
Please refer to footnote for more info.
 Intro
Many of us always try to impress our visitors with JavaScripts, Java
Applets, Flash Players, stunning graphics and so on, but we keep forgetting
that good old HTML can also impress visitors... with a little help. In this
tutorial, I'll explain how image maps work, how they are created and what
they're used for.
For the uninitiated, an image map is one image with
multiple "clickable" areas. For example:
-Image
First of all, you need a suitable graphic. You need to be a bit careful
when choosing the right image. An image that cannot be divided in different
sections is not your best choice, but an image that has clear cut-offs or
lines would be better. Of course, this down not apply to navigational menus
or similar, just to everyday pictures like animals, objects or people.
-Co-ordinates
When you've chosen or created your desired image, you then insert it into
an image editor (I use Ms Paint) so that you can find its co-ordinates. Try
to either write down different co-ordinates of take them one by one and then
insert them into your document. You'll need different co-ordinates depending
on what sort of "hot spot" you'd like to use. Hot spots are covered in the
next paragraph.
-Hot Spot
Now that you've got your image and co-ordinates, HTML comes to finalise
your job. There are three different shapes (commonly termed "hot spots")
that can be used in image maps. They are as follows:
-RECT
-CIRCLE
-POLYGON
-Rect
Rect is obviously short for rectangle. For this one, you'll need two
different co-ordinates. Top right and
bottom left.
-Circle
Many people get confused with this one and many don't even know that it
exists. I personally think it's the easiest of all.
All you need is the centre co-ordinate (the point in the centre of your
shape) and it's radius size (remember your maths: radius is HALF the
diameter. Don't get diameter and radius mixed up!).
- Polygon
The most common hot spot used. This is used for when you can't use
neither of the above hot spots. This
one uses the co-ordinates of the points in order.
So if you're going to have a pentagon (shape with five sides), then you list
all five co-ordinates but make sure they're listed in ORDER. One after the
other, otherwise you'll confuse some browsers.
-Map Name
Just like any person, document, image and country, image maps also
require names. This is simply because if you are going to include more than
one map on your page, then to identify which image goes with which map,
you'll need to name the map. Confused? Look here:
<IMG SRC="cats.gif" USEMAP="#kitties">
<IMG SRC="dogs.gif" USEMAP="#puppies">
<map name="kitties">
[.... codes for map which I'll show you later on ....]
</map>
<map name="puppies">
[......]
</map>
Now, if you didn't name each map, how would the browser know which image
goes with which map?
You'll also notice this tag at the end of each map: </map>. You may have
suspected by now that </map> just closes the map. Simple!
-Area & Anchor Tags
There are two more tags you should know before completing your image map.
<area shape="rect"> is a tag that identifies which hot spot is being used.
The other is the anchor tag which I'm sure you already know what it means.
It's just <href="http://www.YourLink.com>. So in a completed code, they
should both look like this:
<area shape="circle" coords="245,30" href="http://www.YourLink.com">
-Final Code
Now you just need to put all these codes together and you've got magic!
Here's what your final code should look like:
<body>
<img src="trees.gif" usemap="#green" border="0">
<map name="green">
<area shape="polygon" coords="19,44,45,11,87,37,82,76,49,98" href="http://www.trees.com/save.html">
<area shape="rect" coords="128,132,241,179" href="http://www.trees.com/furniture.html">
<area shape="circle" coords="68,211,35" href="http://www.trees.com/plantations.html">
</map>
</body>
- Other Tips
Of course, you don't just have to use external links. You can also use
anchors for bookmarks on the page [href="#SectionTwo"], mailto
[href="mailto:george@trees.com] and other anchor tags. You can specify the
target as well (put it right after the anchor tag) [target="_new"]. Insert
alternative text tags- alt (insert it after anchor as well) [alt="Click here
to learn about trees"].
- Summary
So that's all you need to do. Very easy to create and very professional
looking when used with a good graphic.
------------------------------------
Written by Nebojsa Pajkic
Webmaster of Wizard's domain
Web design + FREE services and resources for Webmasters and Internet
surfers: http://WizardsDomain.net |
