|
|
|
|
 |
|
 |
|
|
|
Image Maps - Construction
Lets move into the meat and bones of client side image maps.
To make an image map, you pretty much have two parts. The first
part is creating the map. This is where you define
the hot spots of an image, or in other words, this is where you
do all the work. The other part is the image itself.
When making the map section of an image map it would be
a good idea to have the image already completed. Here is the one
I will use for this section:
-
Now that we have an image, we will need all the shape areas that
we would like to have active for the image map. There are three
types of shapes that can be used, these are: a rectangle, a circle,
and a polygon. We will try one of each of these shapes. Here
is the general layout of this image map that we will use:
-
You'll need to know how to get the coordinates from an image before we go on. To
get these coordinates, simply open or paste the image into your favorite image
editor. If you don't have an image editor that you've installed on your machine,
you can use Microsoft Paint which is in the Accessories group in the Start menu
of Windows. In Microsoft Paint, the coordinates are displayed in the lower
right-hand corner as you move the mouse around. In Photoshop you'll find the
coordinates in the Info box tool. Almost all popular graphics editors have
coordinate capability.
First, lets look at the rectangle. You will need two sets of coordinates
for this shape. The first one is the top-left corner and the second
is the bottom-right corner. Here are the coordinates that is used for
you test map:
-
top-left: (2, 3)
bottom-right: (248, 23)
Next we will get the coordinates for the circle. For this shape you
must have the position for the center of the circle and its radius.
Here are the values for the circle in this example:
-
center: (356, 16)
radius: 15
Now we are left with the polygon. For this shape, you will have to get
all of the points that the polygon will bend at. Since we are using
a triangle in this example we will only need three points to map out.
Here are those three points:
-
point 1: (6, 29)
point 2: (6, 57)
point 3: (34, 57)
Finally we have all the points (and the radius length for the circle) that
we need for this image map. That was the hard part, now all that is left
is writing the code. For this, lets move on to the next section:
<<Back
Next>>
Head on:
Introduction
Construction
The Code
Wrapping Up
Back to Tutorial Menu
Back to Artist Main Page
Back To HTML Stuff Main Page
|
Copyright © 2000 Tucows.Com Inc.
TUCOWS.Com Inc. has no liability for any content or goods on the TUCOWS site or the Internet, except as set
forth in the terms and conditions and privacy statement.
|
|
|
Upload
