Test title Here

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: ]   There are two types of image maps: client-side & server-side. The server-side image maps have the coordinates stored in a separate file on the server 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, some information is given on both types of maps. 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

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


SHAKING HANDS=zone 1 ~ "A.D.H."=zone 2
"HOMEPAGE"=zone 3 ~ "HELPERS"=zone 4
A server-side image map has the image map information stored in a separate "map" file which has to also reside on a server. So, unlike the client-side image maps, only one line of text is able to be coded into the status window. The MouseOver code here, if used, would have to be very cryptic. However, just like in the client-side image map above, the zones are the same.

[ fig #3.] Server-side Image Map - B

*[click below to goto Tripod page 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 make a client-side map? 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.......

For Client-Side Image Maps (fig #1 above):  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

Once you have those coordinates, you are ready to code your image map. For client-side maps, 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).

Please check out the instructions hyperlinks below for more detailed info.

For a client-side map, remember the following:
it's coded within the HTML; each coordinate is coded within an <area> tag; the proper syntax (designation) for each zone type (default, rect, circle, poly); a comma between x & y values of each coordinate; no space between each coordinate; & the order of each coordinate (upper left & bottom right corner) or (circle center coord & radius length).

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, it's advised not to use the "back" key once you're in the utility.

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