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
Comments: Code for ISMAP link.
Want an arrow to point at your link?
Add this to your <img> code:
|[Example] here's our friend the gopher again, without a link:|
And here he is with a regular image hyperlink (#1) & an ISMAP (Image Map) hyperink (#2).
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.
*[ 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.
[ fig #2.] Server-side Image Map - A
*[click below to goto Tripod page to see this work]
[ fig #3.] Server-side Image Map - B
*[click below to goto Tripod page to see this work]
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
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)
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.
<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...>
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:
[ 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.