 Information
The Basics
Text
Pictures
Spacing
Colors
Links
Alignment
Lists/Bullets
Tables
Frames
Multimedia
Forms
ISO Characters
Meta Tags
Contact Us
Email Support
Email Contact
|
 |
|
Introduction
Image Maps allow you to specify different parts of one picture, and allow each part to link to a different web site. In this section
you will be learning the necessary information and tags to do this.
Telling The Picture To Get The Image Map
The first thing you need to do, is make the picture look for the information it needs for the image map, so it knows where on the
image to make the link. To do this, you insert a tag that looks like USEMAP="#name". This tag adds onto the picture tag so the
end result looks like this.
<IMG SRC="url" USEMAP="#name">
The text, name, is replaced by the name you choose to name your Image Map. This can be anything you want. This is what your
document should look like so far.
|
index.html - Notepad |
....<BODY>
<IMG SRC="images/pic1.gif" USEMAP="#map1">
</BODY>....
|
|
Image Map Tags
Now, you can start writing the image map information, which defines where on the picture the link will be. There are two tags, a
starting tag and an closing tag. All the information goes between these two tags. The starting tag is
<MAP NAME="name"> and the closing tag is </MAP>. The text "name" should be replaced with the name of your Image Map,
which is whatever you want it to be. This should match with the name the picture is linking to in the picture tag.
|
index.html - Notepad |
....<BODY>
<IMG SRC="images/pic1.gif" USEMAP="#map1">
<MAP NAME="map1">
</MAP>
</BODY>....
|
|
Image Map Information
The actual Image Map information consists of coordinates and web addresses. The coordinates specify where in the picture to
put the links, and the addresses specify where the links lead to. The basic information line looks like
<AREA SHAPE="shape" COORDS="xx,xx,xx,xx" HREF=url">
There are three things you need to change; "shape", "xx,xx,xx,xx", and "url". Shape is replaced by one of the three shapes
(RECT, CIRC, or POLY). The xx,xx,xx,xx is replaced by the coordinates marking where on the picture the
link goes. Last, the url is replaced with the web address you want the link to lead to. Each shape however, has different
requirements for these changes. The information for the three shapes is below.
Rectangle
For the rectangle, shape is replaced by "RECT". The rectangle requires four coordinate points,
standing for each of the four lines of the rectangle. The first
point is the left line, the second is the top line, the third is the right line, and the fourth is the bottom line.
So for example, if I wanted to set the left line at 5, the top line at 5, the right line at 60, and the bottom line at
40, it would look like 5,5,60,40. Here is an example using the Rectangle Image Map.
|
index.html - Notepad |
....<BODY>
<IMG SRC="images/pic1.gif" USEMAP="#map1">
<MAP NAME="map1">
<AREA SHAPE="RECT" COORDS="5,5,60,40" HREF="http://www.htmloutpost.com">
</MAP>
</BODY>....
|
|
|
My Homepage - Microsoft Internet Explorer |
|
|
Circle
For the circle, shape is replaced by "CIRC". The circle requires three coordinate points,
standing for vertical placement, horizontal placement, and size. The first
point is the horizontal placement. The second is the vertical placement, and the third is size of the circle.
So for example, if I wanted to set the horizontal at 30, the vertical 20, and size of the circle at 15, it would look
like 25,30,60. Here is an example using the Circle Image Map.
|
index.html - Notepad |
....<BODY>
<IMG SRC="images/pic2.gif" USEMAP="#map2">
<MAP NAME="map2">
<AREA SHAPE="CIRC" COORDS="30,20,15" HREF="http://www.htmloutpost.com">
</MAP>
</BODY>....
|
|
|
My Homepage - Microsoft Internet Explorer |
|
|
Polygon
For the polygon, shape is replaced by "POLY". The polygon has no limit on the number of coordinate points, you may use as many
as you want to make any shape you want. The points come in pairs though. The first point is horizontal and the second
is vertical. You can continue these pairs as long as you want.
So for example, if I wanted to make a triangle, one point at 30 horizontal, 20 vertical, another point at
50 horizontal, and 20 vertical, and a third point at 40 horizontal, and 30 vertical, it would look like
30,20,50,20,40,30. Here is an example using the Polygon Image Map.
|
index.html - Notepad |
....<BODY>
<IMG SRC="images/pic3.gif" USEMAP="#map3">
<MAP NAME="map3">
<AREA SHAPE="POLY" COORDS="30,20,50,20,40,30" HREF="http://www.htmloutpost.com">
</MAP>
</BODY>....
|
|
|
My Homepage - Microsoft Internet Explorer |
|
|
Test Your HTML
|
|
