WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS Properties
HTML 4.01 Tags
Site Management
WD Forums

    Web Video
    Expression Web



    Forum, Blog, Wiki & CMS

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

    The Coffee Lounge
    Computer Issues

When You Can't Get In . . . to the CGI-Bin

by David Lawrence

Locked out by a security-conscious ISP? Here are a few workarounds you can do to come up with a sophisticated solution.

Learning HTML is deceptively easy. Mastering it is tough. This column will do its best to help you learn both the basics and the fine points of HTML, as well as help you in the process of honing the thousand little niggling skills that the Web designer draws upon while completing a page. These will include working with graphics, sound, and video, as well as server issues, browser idiosyncrasies, and the like. I'll try my best not to provoke you too much, although my natural bias toward Macintosh is being fed and enabled by my editor, allowing me to rotate this particular topic with a Pure Macintosh column every other issue.

If you never have to face the prospect of working for a client whose ISP won't allow access to the cgi-bin directory, you're in luck. Unfortunately, most of them avoid it like the plague. Too many security issues. Don't want those damn users writing their own perl scripts. And who needs image maps anyway? That last one is actually a good question, given the ingenious alternatives to mapped images.

Most of the time, an opening screen will use an image map to invite the viewer to travel to different pages in the Web site, offering up a text track to those who either turn images off due to bandwidth restrictions or aren't using a graphical browser. That's one alternative, and an easy one at that. But why give up the visual impact of a graphic, just because you can't make image maps work?

Here are two approaches to getting around image maps: the button bar and background, and the poor man's Web map. Both will work no matter what service provider you use, and through the judicious use of ALT attributes, they'll work for non-graphical users as well.

Button, Button

We've all seen the button bar. A long graphic, spanning the width of the browser's display window, with different words or symbols mapped to take you to various destinations on the Web site. Here's a simple example..

Open your favorite browser, click on each successive word, then come back to the main page. Now try this example.

Do the same thing: try out each of the three buttons, and return to the main page. Note how much faster the individual buttons are. It's obvious why this occurs: no cgi-bin directory to pass through, and no script by which to be processed. Couple that with the fact that the buttons flash individually in the second example, mimicking more closely the actual behavior of the standard personal computer's graphical interface, and it's easy to see why some people actually prefer this approach over the Web map.

The illusion of a Web map is shattered the moment the savvy user passes their mouse over one of your beautifully crafted buttons with their "Show Link URL" preference selected, or they see the implied border attribute of the <img> tag. To get around this, make sure that you use the form <img border=0 . . .> for your image tags. Of course, some browsers don't care (Hellllooo! AOL!) and will show the borders anyway (though this is a non-standard Netscape enhancement -- Ed.).

The three-in-a-row button bar is an obvious example, but what happens when you have graphical restrictions that don't lend themselves to neatly wrapped, geometrically simple three- or four-button linear representations of buttons or bars? Often, you can still be ingenious enough to get around the limitations of not having image map capabilities.

A Real Pill

The following examples are a bit more involved, but still work. In the first example, our fictitious drug company, Pills 'R' Us, has a Web site with four major sections, and through the judicious use of Photoshop's Marquee tool, we're able to effectively render their pill-based first page to get the reader where they want to go. The image map version is here and the individual button version is here. It's important to note that the geometry is working in our favor here: We've chosen to divide up the pill image along perfectly vertical and horizontal axes, and the illusion is heightened by the use of a drop shadow to add depth to the pill itself.

Here's another approach, this time requiring a browser that handles <center> . . . </center> or <p align=center> . . . </p>. I used to love watching the old $100,000 Pyramid on TV, knowing full well that if I were the one under that pressure, I'd get the money every time. In tribute to Dick Clark, I've mocked up the $100,000 Pyramid Web site. By centering the three rows of buttons, I'm able to make the pyramid still seem like an image map. See the example as shown here, and play with the page I created.

Optimized by Netscape

One other approach to getting around the lack of access to the cgi-bin directory is to use tables in Netscape. In this example, we'll take a look at a solution I recently created for a client of mine that wanted to archive back issues of a daily message to its customer base. They wanted the message for a particular day to be available at the click of a mouse, so we settled on the calendar motif. Calendars are pretty easy things to create, and mapping the image of a calendar is nothing more than 28 to 40 square regions. But what if the cgi-bin directory is off limits?

The first solution is strictly for those of us who end up beginning a project like this at 8:30 in the morning and by 5:30 p.m. realize we still haven't had lunch and we're really thirsty: 32 individual, yet uniform, squares. Each "date" square contains the date from 1 to 31 (and a blank one), with the days of the week in a matching "day" rectangle. The day rectangles, although a bit shorter in height than the date squares, are exactly the same width. The 12 different month rectangles are similar in height to the date squares, but exactly 5 times as wide. Note that the client didn't need weekends in this example, but we could have easily accommodated all seven days in the design by making the month name rectangle exactly 7 times as wide as the date squares.

Once we have these individual pieces, we can then arrange them any way we want to create any month of the year. Then it's simply a matter of assigning links to each date. The code for June 1995 is shown below.

Be careful to check your results in a number of browsers; Netscape, Mosaic, and the AOL browser are what I use. Your code may need to extend out beyond 72 characters, as some browsers parse a line break in the code as a space to be placed on the page.

Calendar Code in HTML
<A NAME="jun95">
<IMG ALIGN=bottom SRC="jun.gif"
ALT="The month of June"></A><br>
<IMG ALIGN=bottom SRC="mon.gif" ALT="Monday">
<IMG ALIGN=bottom SRC="tue.gif" ALT="Tuesday">
<IMG ALIGN=bottom SRC="wed.gif" ALT="Wednesday">
<IMG ALIGN=bottom SRC="thu.gif" ALT="Thursday ">
<IMG ALIGN=bottom SRC="fri.gif" ALT="Friday">
<hr width=220>
<!-- this is the layout for June, active through the 30th	-->
<A HREF="#jun95"><IMG ALIGN=bottom BORDER=0
<A HREF="#jun"><IMG ALIGN=bottom BORDER=0
<A HREF="#jun"><IMG ALIGN=bottom BORDER=0
<A HREF="95jun01.html"><IMG ALIGN=bottom BORDER=0
SRC="resources/images/calendar/01.gif" ALT="1st"></A>
<A HREF="95jun02.html"><IMG ALIGN=bottom BORDER=0
SRC="resources/images/calendar/02.gif" ALT="2nd"></A><br>
<A HREF="95jun05.html"><IMG ALIGN=bottom BORDER=0
SRC="resources/images/calendar/05.gif" ALT="5th"></A>
<A HREF="95jun06.html"><IMG ALIGN=bottom BORDER=0
SRC="resources/images/calendar/06.gif" ALT="6th"></A>
<A HREF="95jun07.html"><IMG ALIGN=bottom BORDER=0
SRC="resources/images/calendar/07.gif" ALT="7th"></A>
<A HREF="95jun08.html"><IMG ALIGN=bottom BORDER=0
SRC="resources/images/calendar/08.gif" ALT="8th"></A>
<A HREF="95jun09.html"><IMG ALIGN=bottom BORDER=0
SRC="resources/images/calendar/09.gif" ALT="9th"></A><br>
<A HREF="95jun12.html"><IMG ALIGN=bottom BORDER=0
SRC="resources/images/calendar/12.gif" ALT="12th"></A>
<A HREF="95jun13.html"><IMG ALIGN=bottom BORDER=0
SRC="resources/images/calendar/13.gif" ALT="13th"></A>
<A HREF="95jun14.html"><IMG ALIGN=bottom BORDER=0
SRC="resources/images/calendar/14.gif" ALT="14th"></A>
<A HREF="95jun15.html"><IMG ALIGN=bottom BORDER=0
SRC="resources/images/calendar/15.gif" ALT="15th"></A>
<A HREF="95jun16.html"<>IMG ALIGN=bottom BORDER=0
SRC="resources/images/calendar/16.gif" ALT="16th"></A><br>
<A HREF="95jun19.html"><IMG ALIGN=bottom BORDER=0
SRC="resources/images/calendar/19.gif" ALT="19th"></A>
<A HREF="95jun20.html"><IMG ALIGN=bottom BORDER=0
SRC="resources/images/calendar/20.gif" ALT="20th"></A>
<A HREF="95jun21.html"><IMG ALIGN=bottom BORDER=0
SRC="resources/images/calendar/21.gif" ALT="21st"></A>
<A HREF="95jun22.html"><IMG ALIGN=bottom BORDER=0
SRC="resources/images/calendar/22.gif" ALT="22nd"></A>
<A HREF="95jun23.html"><IMG ALIGN=bottom BORDER=0
SRC="resources/images/calendar/23.gif" ALT="23rd"></A><br>
<A HREF="95jun26.html"><IMG ALIGN=bottom BORDER=0
SRC="resources/images/calendar/26.gif" ALT="26th"></A>
<A HREF="95jun27.html"><IMG ALIGN=bottom BORDER=0
SRC="resources/images/calendar/27.gif" ALT="27th"></A>
<A HREF="95jun28.html"><IMG ALIGN=bottom BORDER=0
SRC="resources/images/calendar/28.gif" ALT="28th"></A>
<A HREF="95jun29.html"><IMG ALIGN=bottom BORDER=0
SRC="resources/images/calendar/29.gif" ALT="29th"></A>
<A HREF="95jun30.html"><IMG ALIGN=bottom BORDER=0
SRC="resources/images/calendar/30.gif" ALT="30th"></A>

HTML5 Development Center

Recent Articles