
Image maps
are images with different parts of it, called hotspots, linking
to different pages or sites. An example is the piece of notebook paper
on my home page.
To create an
image map the short easy way:
-
Place an image (either GIF, JPEG, or PNG) on
your HTML page.
- Open MapEdit (an
application). Download
Here
-
With MapEdit, open the HTML page, and then open
the image.
-
From either the
Tools menu or the toolbar, select a shape for the desired hotspot: a
rectangle [default], a circle, or a polygon (this allows the most free
form)
-
To create hotspots
in the shape of:
-
a rectangle -- left click on one of the
corners of the area that you want to become a link. Then, left click a
second time on the opposite corner, thus tracing the shape of a
rectangle. (you don't need to hold down the mouse button in between
the two mouse clicks)
-
a circle -- left click approximately around
the center of the desired circle, then left click a second time around
the edge.
-
a polygon -- left
click on any spot on the edge of the desired polygon shaped hotspot.
Then carefully trace the outline of the deisred hotspot by continuously
left-clicking at points of curvature. If you happen to make a mistake,
simply press the ESC key to cancel it. Once you have surrounded the area,
click the right mouse button or press enter to stop.
(When you are
creating the hotspots, MapEdit draws a line outlining the area that
you are choosing. This line is only a guideline and isn't being visibly
drawn onto your image. You can change the color of this line by selecting
Edit Hotspot Color which is on the File menu.)
-
Once you have
either left clicked for the second time or right clicked in the case of
the polygon, a window will pop-up requesting the URL that the hotspot
will link to. Please remember to type in exactly what you would type
in between the quotation marks of the 'a href ' tag; this means that you
should type in the entire http://www.address.com or filename.htm(l) or
#anchor label.
-
Also, you may wish to enter a title, a.k.a text
alternative for each hotspot. This is extremely important for any
non-graphic supporting browsers that might be viewing your page.
-
To finish, simply click OK or press enter. And
PLEASE remember to SAVE, (as always it's on the File menu).
-
To Test or Edit
your hotspots, choose the cursor-looking button, or select 'Test + Edit'
under the Tools menu. Then, just left click the hotspot area and the same
pop-up window will appear.
|