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

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. Format for 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 are in a table: width=323, border=3, 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 has all the code for the image map 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.]

*[ ed note: ]   Below are references to the server-side image maps. However, please note while Tripod does (for now) support server-side image maps, Geocities, Anglefire & GO/WBS do not. I'm not sure of others, but it seems most servers no longer support them. Just in case you are on a supportive server, information is given on both types. This will also help you recognize a server-side image map & not waste time trying to figure why it doesn't work on a non-supportive server.
~~~thanks.

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.

*[click below to goto Tripod pg to see this work]


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

*[click below to goto Tripod pg to see this work]


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 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.

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.]

The first Server-side Image Map (fig #2 above) has it's map file written as follows: The second Server-side Image Map (fig #3 above) has it's map file written as follows:

Remember these restrictions about a map file: name must use the ".map" extension...although it is saved as a basic text file, i.e. 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; the space (for server-side) or no space (for client-side) 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 <area> tag. Otherwise, the zone for the area of the rectangle will "block-out" zone for the circle & the circle zone 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.