ATTN: NET4TV VOICE: Please be sure to also grab following 2 files (map files) for this article:
===============================\ and the following 2 images:
NOTE: you may already have the goofygopher gif on your server from a previous article.
and the following 2 images:
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
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. 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....
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.
fig #3. Server-side Image Map - B
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
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)
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.
<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.]
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:
[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.