Tutorials : Poor Man's Graphics :

Poor Man's Graphics

by Keld H. Hansen

While surfing the Web you may sometimes find a site which contains a tiny user poll. A potential question of such a poll could be, "Are you using EJB's for Java Web applications?". Upon having answered the question (yes or no), you're often shown the current status of the poll, and this may be done via a small bar chart.

This chart can be made in various ways, for example by an applet, or it may be a GIF-file constructed dynamically on the server. Another possibility is to use 1-pixel GIF's which you simply "stretch" to have the correct width and height. In this article I'll show how to utilize this technique. I'll start with the HTML-basics, go through some "iterations" using JSP and finally make a JavaBean to make the technique easy to use and give the graphics a final touch.

When would you use this technique? Well, actually it's useful in many situations, and it's a nice tool to have in your toolbox. Some reasons for using it could be that the technique uses plain HTML, which allows you to utilize style sheets, links, mouseover-effects etc. Another reason could be that you prefer to avoid using applets to keep things as simple as possible.

The Basics

The main idea behind using 1-pixel GIF's is that you can specify your own width and height of any GIF-file. So to have a red, horizontal bar of length 100 and height 10, you first create a 1 x 1 GIF-file only containing the red color. The size is actually not important, but should be kept small to minimize download time. You may now code:

<img src="redpixel.gif" width=100 height=10>

This will produce a bar that looks like this:

To experiment with different sizes of your GIF, you may use a simple JSP-page like this:

<img src="redpixel.gif" width=<%=request.getParameter("w")%> 
height=<%=request.getParameter("h")%>>
<form name=myform>
Width: <input type=text name=w><br>
Height: <input type=text name=h><br>
<input type=submit>
</form>

You can easily expand this example to enter the color too. I suggest that you make a small collection of GIF's with the most common colors, and also create the famous "invisible 1-pixel GIF" and add it to your collection. It might be useful later on.

Keld is a web architect working for one of the largest IT-companies in Denmark. He has more than 30 years of experience within the computer industry.

How to Add Java Applets to Your Site

New on the Java Boutique:

New Review:

Time Management Made Easy with the Quartz Enterprise Job Scheduler
Why not just use the Java timer API? This open source scheduling API boasts simplicity, ease-of-integration, a well-rounded feature set, and it's free!

New Applet:

Reverse Complement
Reverse Complement is a simple applet that converts DNA or RNA sequences into three useful formats.

Elsewhere on internet.com:

WebDeveloper Java
Lots of Java information on webdeveloper.com

WDVL Java
Thorough Java resource at the Web Developer's Virtual Library.

ScriptSearch Java
Hundreds of free Java code files to download.

jGuru: Your View of the Java Universe
Customizable portal with online training, FAQs, regular news updates, and tutorials.