|About Image Maps|
Client-side Image Maps
An Image Map is a reference to virtual areas within the boundaries of a particular bitmap image. Internet Browsers that recognise image maps can respond to the cursor and mouse click, only when the cursor is over image pixels defined in the "map".
General HTML 3.2 tags, Tables, Forms and Frames all have their own tutorials on this site. After completing this page, follow the back button above.
The farm land image on the left is just a normal image. However, in the page HTML code, there are references to areas of pixels in this image that will react to mouse clicks. Each defined area refers to a hyperlink that will instruct the browser to respond in some way, usually to open another page. The links included in this example are only local bookmarks.
|The included screen capture (above right) is from a program that automates the
creation of image maps. The "mapped" areas can be seen clearly. I will discuss
programs that automatically create image map code later. First, learn how they work so you
can decipher code of your own and others Web pages.
There are three shapes that can be defined in an image map. Two are fairly simple to implement manually, whereas the third can be somewhat complex.
The Image Map
The Image Source
<img src="bush2a.jpg" width="211" height="158" border="0" align="middle" usemap="#imageMap1">
The "usemap=#??????" option is all that has to be included in an image source tag. Make sure, as with the images them selves, that you spell the map name exactly the same in both tags. The "href=" components of the "area shape" tags is where you place the path or URL of the hyperlinks.
Place the cursor
at the position of each corner of the areas you want to map (in the centre for a circle)
and write down the pixels numbers both Horizontally and Vertically. In the case of a
circle, note the radius in pixels that you want to apply - out from the recorded centre
point. Realise that your painting program might display the cursor position as
"X" (horizontal) and "Y" (vertical) coordinates.
Once you have mastered these concepts, and hopefully successfully implemented your own manually created image maps, you will become a master of yet another set of complex HTML tags. If it is your intention to eventually design many Web pages, then you will need to have this level of knowledge one day.
Avoiding the use of image maps, many Web developers chop up images and place the sections on a page so that they reconstuct the full image when all sections are loaded. Then each section (image) uses the standard <a href=??????> ... </a> hyperlink. See if you recognise this method on sites that you visit. Microsoft.com use this method on many of their pages, but you have to watch the pages carefully as they load.
Server side Image Maps
As apposed to server side image maps, client side image maps are readily transportable (imbedded in the HTML code) and are not server platform specific. If you need to use server side image maps, contact the Server Master at the Hosting service that will host your pages.
Now, the bad news!:
top of page
|Over 120 pages: All major topics divided into Classrooms|
|Free Backgrounds & Buttons!||DTP and HTML||"My First Page" HTML lessons|
|Tutorial Text Search||Perl CGI Scripts||Typography & Layout|
|4 pages of Links||Visitors Book||Perl Scripts Forum n/a|
|Free Links page||Feedback Form||Q/A contact Forum|
|pages Designed & Published - Ron F Woolley|
|©1997 '98. Last Revised: Friday, 31 October 2003 22:04|