Prior to getting into the article, we should reiterate a point that has been very much on a lot of people's mind of late. What? TRANSLOADING/FREELOADING!! [In this case, "freeloading" does not refer to someone who sponges off another, but rather the FREE file UPLOADERS.] Whether you pay to use a transloaer 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 we had 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 money to the host (home) server where that image is stored. In very general terms the proceedure used to display the image is called bandwidth.
If people are not viewing a site on the home server where the image is stored 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 lessenn 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 take up quite a lot of space & therefore require more bandwidth to "display." 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, & 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:
width="width_of_your_image" ISMAP
| [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).
|
#1
|
|
The ISMAP attribute does not have to be all 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? We put 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. i.e., if they clicked on the upper left corner, maybe they're taken to your home page. Clicking the upper right corner will take them to your music page, the lower left or lower right to a different page, & maybe the middle will take them to your guestbook, for example. In this case, you would most likely have a custom-made image that has, for example, a house in the upper left, the treble clef in the upper right, a different symbol in the 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? Well, the banner image itself 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 one of the image mappers 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), note how 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 obviously begin each definition with "<area...."; the order of the remaining attibutes is arbitrary. However, note the syntax (i.e. wording &/or proper method used, e.g. commas/spaces or not) for each coordinate in the map code. These will be a bit different for the server-side image map file.
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 file is written.]
There are certain restrictions to remember about a map file: the 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); the comma between the 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. Notice the second Server-side Map is more specific on what points make up each zone. Unlike the first Server-side Map, the edges of the different zones do not abutt each other & 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 for those just learning how to do image maps. Once you've entered your image's URL & the number of zones you want to create, you are taken to a point & click page to determine your zones' parameters. Once there, remember do not use the "back" key.
On that page you will find your original image plus a duplicate or work image right below it & a table with text boxes to fill in the coordinates of each point. Once you click on a point on your original image, a red dot appears on the work image. If you wish to accept that point's coordinates, you click on the word "Point 1" in the table & those coordinates will be filled into the text box for point 1. Remember: point 1 on a rectangle would be the upper left corner, point two would be the bottom right corner of that zone. Continue until you have all your points determined.
You would then click on the "View Map" button which will turn your original image into an image map for you to check how the zones (outlined by cursor "boxes") look. If you need to adjust the coordinates, you simply change the value of the coordinate(s) in the text box(es) for the desired point(s) & then reclick "View Map."
Once you have your map as you want it, click on "Hard Copy" & Prototype's form will ask you for your e-mail addy & send a copy of your code to your e-mail. Then, all you have to do is retrieve it from your e-mail, fill in the proper URLs where there is an "href='#'" in the code & place it in your HTML. Now that you have the base code for your image map, you can always modify the zone points. Once you become more comfortable with image maps, you should be able to use any image mapper with ease & just record the coordinates on paper.
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.