BreBru's Art Room | ||||||
![]() Extra Info Music Room ArtRoom |
||||||
IntroductionI know that there are a large number of image map tools that will automatically generate the correct code for you to create image maps. Many of them can be downloaded for free but the better ones do cost money. Building the maps by hand is not, however, a money saving effort but a method for keeping better control of your web pages.Once you have the basics, creating image maps by hand is really
not that much more difficult than by the automated method and you
have complete control over all the steps. The key is a bit
better note taking and a clear idea of what is supposed to happen
when the user clicks on an "active" area of your image. Step 1: Build the image![]() The image is basically a digital photograph that has had some editing
to remove a small well house and barb wire fence and then the text
has been placed on top. The main title uses the techniques
outlined in the Cutout Text Tutorial also available at this site.
Step 2: Understanding X-Y coordinatesThe computer screen is composed of "dots" in a grid with the grid size (640 x 480 for example) indicating how many dots or pixels (picture elements) there are horizontally and vertically on the screen. Therefore every position on the screen can be located by its X or horizontal, and Y or vertical position.Step 3: Use the mouse![]() We will be defining "rectangles" as active areas that the user can click on and a rectangle is defined by locating its upper left corner and its lower right corner. Once you have those two coordinates the computer can always know if the mouse has been clicked within those boundaries.
Step 4: Write down all the coordinates![]() Now you move through each of the items in the content list recording
the upper left and lower right coordinates. In each case this
is an X-Y pair, how far horizontally, in pixels, from the
left side of the screen and how far down from the top of the screen
(the upper left corner of an image is position 0,0). For use
in the necessary HTML code each pair of numbers is grouped together
so you get a listing like this:
Animated HTML: 20,315,235,339 Farm Photos: 20,340,235,364 Graphic Experiments: 20,365,235,389 Tutorials: 20,390,235,429 Step 5: Check the numbersThough you will not get a disaster if you define intersecting rectangles it is best not to confuse the browser. Therefore set up your numbers so that each rectangle is separate from the others with the next lower Y coordinate at least 1 pixel larger than the bottom right Y coordinate of the item above.Step 6: Looking at the code:Here is the code that displays the main menu for this site:
</HEAD> <BODY BGCOLOR="#FFFFFF" > <MAP NAME="menu"> <AREA SHAPE="rect" COORDS="20,285,235,314" HREF="fineart/intro1.htm"> <AREA SHAPE="rect" COORDS="20,315,235,339" HREF="anhtmidx.htm"> <AREA SHAPE="rect" COORDS="20,340,235,364" HREF="farmphot.htm"> <AREA SHAPE="rect" COORDS="20,365,235,389" HREF="grexperm.htm"> <AREA SHAPE="rect" COORDS="20,390,235,429" HREF="scptutor.htm"> </MAP> <Center><IMG SRC="mainidx.jpg" USEMAP="#menu"
WIDTH=598 HEIGHT=440 ALT="click on options bottom left" BORDER=0
></Center> Step 7: The MAP tagThe MAP tag, like most HTML tags is a container so you need the opening <MAP > and the closing </MAP>. If you have created an image map and it isn't working one of the most common errors is to have forgotten the closing </MAP>.<MAP> takes one required element, the NAME property, which
gives the browser the location in the HTML code for the active areas.
You MUST have a NAME defined and get into the habit of always typing
it in lower case. Another very common error which will cause
the image map to fail is to have a difference in case between the
map definition (in our example "menu") and where the property is
put to use by USEMAP (say perhaps, "Menu"). The property used
must be exactly the same in both locations. Step 8: The AREA tagThe AREA tag is the heart of an image map. This is what tells the browser where the active areas are in the image. The SHAPE property, as well as "rect" for rectangle, can define circles and polygons but that is another discussion. The COORDS property contains the two pairs of X-Y coordinates that define each rectangle, placed between quote marks. This is another potential problem area when creating image maps. If you forget an opening or closing quote mark in any of the sets the image map won't work, so check carefully.Finally the HREF (hypertext reference) which you have seen before
with the Anchor tag, defines which document or image the browser
is to select when the area is clicked on. Again the quotes
are crucial and forgetting one will shut down the image map. Step 9: The USEMAP propertyTo actually put the image map to work you add the USEMAP property in the IMG tag itself. The IMG tag calls up the image, places it on the browser's screen and then stores the active areas in anticipation of a mouse click. Similar to within document hypertext jumps, or bookmarks, USEMAP requires the use of the "#" to jump to the map coordinates based on the indicated name in quotes.Step 10: Try it outThere, that is it. 8 maybe 10 lines of code, a bit of work with the mouse, some careful recording of coordinates and the job is done. Do one of your own, or download my main image and do the work just to check out the process (create dummy files to jump to). Once you have completed it successfully, being able to check back with the correct code, then you can start your own. Some final pieces of advice:
|
||||||
|