Word Count Total ~   ___2000___

How article actually appeared in Net4TV Voice
Vox Populi, Vox Dei - Vol 2, Issue 12 (#38) - Aug 29, 1999


Due to the fact both Net4TV Voice's server & many other servers do not support server-side image maps, this article was modified fm it's original version. Please refer to either our copy of the modified version or how it actually appeared in Net4TV Voice via above link.


ADH-HH Tips & Tools

Is that Image a MAP?

edited by:ericB

First, we should reiterate a point that's been very much on a lot of people's mind of late. What? TRANSLOADING / FREELOADING!! Whether you pay to use a transloader service or utilize the free uploaders, recent developments at Tripod have captured a lot of people's attention these past two weeks.

Tripod instituted a "no-link" policy the other week. This meant the sigs of a lot of people's e-mails went defunct. Okay, this would not normally be a topic of this column except this "no-link" policy also affected any images stored on Tripod & used for our homepages, even for some Tripod users on Tripod sites!!. We have to re-state: every time an image is viewed by someone on the web, it costs the host (home) server where that image is stored. In very general terms the procedure used to display the image is called bandwidth.

If people are not viewing a site on the home server but are instead looking at a site on another (remote) server where the image is being linked "from," the home server is losing money. Tripod got tired of this & shut down ALL remote linking for a time. They have since modified their policy & permit linking to gif-type files. This is mainly because a lot on the web (computer & WebTV-users alike) use gif banners in guestbooks, banner exchanges, etc. to draw traffic to their sites (& thus, page hits for Tripod). This does not lessen the need for each person to upload files used on their site to their own servers/directories!!

As it stands now, Tripod is still blocking linking to JPG, WAV, MP3, etc. files since these types of files are quite large & therefore require more bandwidth to handle. We urge every reader to upload their files! If you are unfamiliar with uploading, please click here or on our homepage link or banner at the end of this article & we will be glad to walk you thru it until you are very comfortable with & adept at uploading. I'm sure this topic will be discussed more elaborately elsewhere in Net4TV Voice, but it bears repeating many times...& we thank you for your attention to this.

Intermediate Tip : Quick & EZ ISMAP
   ~submitted by:  Larry  [ email ]~
Comments: Code for ISMAP link.

Want an arrow to point at your link?

Add this to your <img> code:
width="width_of_your_image" ISMAP

[Example] here's our friend the gopher again, without a link: My friend, 
the GoofyGopher (5.4k)

And here he is with a regular image hyperlink (#1) & an ISMAP (Image Map) hyperink (#2).

#1   My animated friend, the GoofyGopher (5.4k)
regular image link

My animated friend, the GoofyGopher (5.4k) #2   
ISMAP image link

The ISMAP attribute does not have to be capitalized. The format for the linked mapped image above is: <a href=http://Net4TV.com/voice/><img src="goofygopher.gif" width="71" height="52" ISmap alt="My animated friend, the GoofyGopher (5.4k)" title="Goofy Gopher animated gif" border=5 invborder></a>

BTW, how did we make the vertical line above? The images in a table, width=323, border=3, invborder, bgcolor=slategray. The left & right <td>'s (table data cells) are both width=170. The images, text, & spacers are placed in each data cell as desired. The vertical line = <td bgcolor=purple><spacer type=horizontal size=3> </td>

ADDITIONAL INFO  The above tip used a single image & a single location/URL (target reference). A more complex mapped image would transport your visitor to a different location/URL depending on where on the image they clicked. For example, if the upper left corner is clicked, maybe they're taken to your home page; upper right corner, to your music page, lower left or lower right, to different pages, & maybe the middle will take them to your guestbook. In this case, you'd most likely have a custom-made image that has, for example, a house in the upper left, treble clef in upper right, a different symbol in lower left & lower right, & a guestbook symbol in the middle... Let's use our banner as an example [Notice we can use the same image for all three image maps.].....

fig #1. Client-side Image Map
A client-side image map is one where all the code for the image map is included in the page's HTML....

The good aspect of the above image map is the ability to use the MouseOver code to designate the destination of each zone of the image. As you place the cursor over the four different zones of the above image, notice the text in the status bar below. [note: refer to issue #30 for more info on MouseOvers.]

fig #2. Server-side Image Map - A
.....where-as a server-side image map has the image map information stored in a separate "map" file which has to also reside on a server.

Unlike the client-side image maps, due to only one line of text being able to be coded into the status window, the MouseOver code here, if used, would have to be very cryptic.

fig #3. Server-side Image Map - B

In this example, zones are coded to follow the general outline of the component images that make up the above banner image. For example, the shaking hands are coded as a polygon & clicking on any part of that image takes you to the same location. Clicking on the dark area above or below that image takes you to a different area, designated by the default reference: the location target when clicking on an unmapped (undefined) area (i.e., if it isn't specifically mapped, take the visitor "here"). This reference is not given specific coordinates in the map file.

How do you do that?  The banner image must first be defined with the normal image tags & attributes. Depending on the type of map, include (for complex client-side map/multiple destinations) USEMAP attribute in the <img> tag; or (for simple client-side map/single destination) ISMAP attribute in the <img> tag, & <a href="http://destination_URL> </a> around the <img> tag; .... or .... (for complex server-side map) include ISMAP attribute in the <img> tag & <a href="http://.......filename.map"> </a> around the <img> tag. Note the server-side image map file must use the ".map" extension.......

Take your image to an image mapper listed below or a similar one. You will need to determine the boundary points of the areas of each zone of your image. [note:] The upper most left corner of your total image would have an (x,y) coordinate of (0,0) called the origin

    You will need the following [note the commas & space or lack of them between each coordinate]:

  • for a rectangular zone
    1. upper left corner's (xu,yu) coords
    2. bottom right corner's (xb,yb) coords
      ..........of each zone.

    [format] .....xu,yu,xb,yb (client-side)
    [format] .....xu,yu xb,yb (server-side)

    x=number of pixels to the right from the origin / or from the left side of your total image (the x-axis)
    y=number of pixels down from the origin / or down from the top of your total image (the y-axis)

  • for a circular zone
    1. center (xc,yc) coords
    2. radius (xr,yr) coords

    [format] .....xc,yc,radius (client-side)*
    *note here there are only three coords values; the "radius" value is the numeric length of the radius.
    [format] .....xc,yc xr,yr (server-side)

  • for a polygon-shaped zone
    1. the (x,y) coord of each point
      Maximum of 10 points

    [format] x1,y1,x2,y2...x10,y10 (client-side)
    [format] x1,y1 x2,y2...x10,y10 (server-side)

You may have noticed client-side maps use a coma between the various (x,y) coords of different points (x1,y1,x2,y2...) while server-side maps use a space to separate different point coords from each other (x1,y1[space]x2,y2...). Once you have those coordinates, you are ready to code your image map.

For Client-side Image Maps (fig #1 above), the following code is included within the HTML code of your page.

    <center> <img height="60" width="331" usemap="#0829-1" src= "adhhhlogomap.gif"> </center>

    <map name="0829-1"> <area shape="rect" coords="2,6,110,54" onMouseOver="window.status='Join ADH Homepage Helpers'; return true" onMouseOUt="window.status=' '; return true" href="http://adhjoin.cjb.net"> <area shape="rect" coords="113,6,216,54" onMouseOver.... href="news:alt.discuss.homepage"> <area shape="rect" coords="221,6,326,30" onMouseOver.... href="http://adhgallery.cjb.net"> <area shape="rect" coords="221,30,326,54" href="http://adhhelpers.cjb.net" onMouseOver...> </map>

Since each client-side image map zone (above) is defined using the <area> tag, you must begin each definition with "<area...."; the order of the remaining attibutes is arbitrary. However, note the syntax for each coordinate in the map code (i.e. the wording &/or proper method used, e.g. commas/spaces or not). These will be a bit different for server-side image map files.

For both Server-side Image Maps (figs #2 & #3 above) the HTML coding is identical to each other [note: The difference lies in the way the map files are written.]

    <center> <a onMouseOver="window.status='Hands:join ADH=ng Hmpg=Home Hlprs:Help'; return true" onMouseOUt="window.status=' '; return true" href=adhhhlogomap.map><img height="60" width="331" src="adhhhlogomap.gif" ismap> </a>
The first Server-side Image Map (fig #2 above) has it's map file written as follows:
    default http://adhhome.cjb.net rect http://adhjoin.cjb.net 2,6 110,54 rect news:alt.discuss.homepage 110,6 220,54 rect http://adhgallery.cjb.net 220,6 326,30 rect http://adhhelpers.cjb.net 220,30 326,54
The second Server-side Image Map (fig #3 above) has it's map file written as follows:
    default http://adhhome.cjb.net poly http://adhjoin.cjb.net 5,6 37,14 77,14 109,6 109,42 81,46 49,58 28,46 5,42 rect news:alt.discuss.homepage 113,14 217,46 rect http://adhgallery.cjb.net 221,10 327,26 rect http://adhhelpers.cjb.net 229,34 315,50

Remember the restrictions about a map file: name must use the ".map" extension; no other extraneous tags or marks allowed (NO <HTML>, <body>, quotation marks, etc. ~ even be careful about paragraph marks); proper syntax (designation) for each zone type (default, rect, circle, poly); comma between x & y values of each coordinate; (server-side) the space or (client-side) no space between each coordinate; & the order of each coordinate (upper left / bottom right corner) or (circle center coord / radius coord for server-side or length for client-side). Please check out the instructions hyperlinks below for more detailed info. The second Server-side Map above is more specific on what points make up each zone. Unlike the first Server-side Map, there are gaps between each zone. These gap areas are the areas that once clicked on will send your visitor to whatever URL you designated as the default in the map file.

Another important point to remember: the zones are selected in the order they appear in the map file. If you have a circle within a rectangle, list the circle <area> tag before the rectangle. Otherwise, the area of the rectangle will "block-out" the circle & it will never be able to be selected.

Also, check out these resources:

  1. Owens4's Making Image Map   [Homepage]
  2. Prototype-I's Image Mapper     [Homepage]
  3. Prototype-I's Image Mapper Instructions
  4. PoorMan's Image Mapper        [Homepage]
  5. PoorMan's Image Mapper Instructions

[ed note:] I personally like Prototype I's image mapper, especially for those just learning how to do image maps. It provides a point & click copy of your image, a work image where a red dot indicates exactly where that point will be on your image, & a table form that allows you to "auto" enter each coordinate. After determining all the coordinates, you're able to test how the map will look, modify the coordinates & retest how it will look. Just remember, he advises not to use the "back" key once you're in the utility.

In his utility, remember: once you click on a point, you just click on the word "Point 1," "Point 2," (or whichever point you're determining) in the table & those coordinates will be filled into the text box for that point. The neatest part? After getting your image map like you want it, clicking on "Hard Copy" will send a copy of your code to your e-mail. Then, after retrieving it from your e-mail, fill in the proper URLs where there is an "href='#'" in the code & place it into your HTML. Now that you have the base code for your image map, you can always modify the coordinates.

About Alt.Discuss.Homepage-Homepage Helpers

Our alt.discuss.homepage newsgroup is a great source of help if you are just beginning or run into a snag when creating your home page. Each issue, we focus on one or more tips that will help your home page design. You can visit our home page at http://members.tripod.com/adhhh/ & request more one-on-one assistance. Our Help Teams (which can be directly contacted via our new He lp Desk) include: Tutor Team; Construction Crew [if you have a particularly complex design problem]; & Image Researchers. Also check out the collection of various home page building resources in our Resource Center.

Have a tip, idea, tool, or shortcut you'd like to share & see featured in the next or subsequent article? Submit your tip to our ADH-HH Tips & Tools Committee.