If it weren't for the ability to embed graphics into an HTML page, the WWW probably never would have been as popular as it now is. Graphics can explain complicated ideas easily and can also make a page more interesting.
Imagemaps allow a user to graphically choose a direction. This can be used to show a geographic map and allow the user to choose a site. Intranets might use imagemaps to show a floorplan of a building.
In this chapter, you will learn:
One of the popular features of the early Web browsers was the capability to display images in the text of a document. This is one of the advantages the WWW had over other information systems such as Gopher.
Using inlined images makes a document much more interesting than just plain text. Adding images to a page, however, makes it take longer to download. This time can be substantial over slower modem links, especially with larger images. However, loading over a network like Ethernet or Token Ring makes images load much faster than they would over a modem line.
Images can also be used as a map, called an imagemap. Imagemaps allow the Web designer to define certain areas called "hotspots," which, when activated, link to certain pages.
Many sites use imagemaps as a way to navigate the site. Although this is often nicer to look at than a list of links, it often takes much more time to download. Imagemaps do have some uses in an Intranet and the "Imagemaps" section will cover these. The "Imagemaps" section will also discuss server-side and client-side imagemaps.
There are many different graphics formats. Some are pixel-based, and some are vector-based. Pixel-based graphics record each dot in an image, and they are often larger than vector-based images. Vector-based formats record the lines, or vectors, that are drawn.
There are also lossy or lossless formats. Lossy formats may look different than the original when they are viewed. This is because they have lost information. Lossless formats will not lose data and will look the same as the original.
Fortunately, the Web uses only two major formats: GIF and JPEG. GIF stands for the Graphic Interchange Format, which was developed by CompuServe. JPEG stands for the Joint Pictures Experts Group. Each format has its strengths and weaknesses. Let's take a look at these formats in more detail.
GIF, or Graphics Interchange Format, is a lossless 8-bit pixel-based format that allows for up to 256 colors per pixel. The latest release of GIF is called GIF89a. It was released by CompuServe in 1990.
GIF files use LZW compression on data to make it smaller to store and faster to download. LZW compression works very well on simple images, but complex images may compress at a ratio of only 2:1. For complex images, a better format to use is JPEG, because it compresses better.
GIF files are stored as a series of blocks and sub-blocks that are used to accurately reproduce the graphic. These blocks contain data and descriptions of the data, which allows different types of GIFs to be created.
Normal GIF images store the image block by block, and are displayed that way. The GIF image is read in, in one pass. During this pass, each block is read and placed in the image where it belongs. This can take some time to get the whole image downloaded and placed. GIF files can also be stored as interlaced images.
Interlaced images start with a blurry picture and gradually fill in the details of the image as they are downloaded. This is done by storing the data in a different order in the file. The GIF decoder is first given the incomplete image, and then more detail is added later. This allows the user to get a good idea of what the image is before having to download the entire image.
GIF images can also be used as transparent images. These images define one color to be invisible. When the decoder sees this invisible color, it replaces it with whatever color the background is. This gives the appearance of being able to look through the image. This is a very nice feature for having odd-shaped images, such as circular buttons.
GIF89a also supports animated GIFs. These are GIF files that have multiple images stored in them. As the decoder displays these images over each other, it appears to cause animation. This can be used to have an icon "morph" into something different or to have a simple animation on the screen.
| CAUTION |
Not all browsers can handle animated GIFs. These browsers will commonly display only the last image in the animation. |
GIF was the first adopted graphics format for the Web and is supported on the widest number of browsers. JPEG is also a very popular format, but some older browsers don't support JPEG files.
JPEG format is a set of standards for compressing a full-color or grayscale image. JPEG allows for 16.7 million colors (24 bits per pixel). This makes it much better for photographs, art, or other images where many colors are needed than the GIF standard, which can use only 256 colors.
JPEG is a lossy format. This means that the image may look different than the original when it is decompressed. This is not too bad since the JPEG compression loses colors in the higher frequency colors. These colors are not as noticeable to the human eye, and the image still looks OK.
One big advantage JPEG has over GIF, besides having so many more colors, is the compression. GIF images are compressed at a ratio of 2:1 to 4:1. JPEG images can achieve 10:1 to 20:1 with little loss in picture quality. This can make images download much faster. You can also compress JPEG images more than this, but it will affect the quality of the picture.
One of the good things about GIF images is the interlaced GIF images. This gives the user the fading-in effect when downloading the images. The JPEG format called p-JPEG, for progressive JPEG, can be used to give the same sort of effect. There is one difference between the GIF and JPEG versions, though. The GIF version takes only one pass through to load the interlaced image; the JPEG version requires multiple passes, and each pass requires as much time as the first. Normally on faster processors, the fact that JPEG takes more time than the GIF to decode is not as noticeable because JPEG takes less time to download.
JPEG files can be read and displayed by most current browsers such as Netscape, Mosaic, and Microsoft Internet Explorer. Older browsers, though, may not be able to handle JPEG images.
The two formats, GIF and JPEG, are the ones used on the World Wide Web today. Each format has its strengths and weaknesses. Knowing when to use each one is important. This section discusses when to use GIF over JPEG, and vice versa.
JPEG files are required for any image that needs to display more than 256 colors. Some Intranets might be PC-based and have systems that can't display more than 256 colors, so this would not be an issue. Newer systems or higher- end systems, though, usually can display all 16.7 million colors. If your image requires this many colors, then JPEG is the way to go.
JPEG files also compress much better than GIF files. This is very important for slow links, such as most Internet links. LANs have much higher speeds and often the extra size for a GIF is not as noticeable. Still, trying to reduce the load on the network is a very important task. If there is no reason to use extra bandwidth, then you shouldn't use it.
If your Intranet is using browsers that don't support the JPEG format, then obviously the choice of which to use would be GIF. You would also want to use GIFs for simple animations or if you need transparency. GIF images are also better for images that have a few sharp colors or for black-and-white images.
Most internal Web site developers will not have access to a graphics design house to create images for them. Instead, they will have to learn how to create graphics on their own. There are many different graphics tools available. This section discussed four of the more popular ones. One of these is for UNIX-based systems, and three are for Windows systems.
XV is a shareware utility that can be used for most versions of UNIX. It is available from ftp://ftp.cis.upenn.edu/pub/xv. The licensing information is available under the About XV button. Basically, commercial users need to buy a license for $25. The printed manual can also be purchased for $15. XV is written by John Bradley.
XV can handle many different image formats, such as the following:
XV has many features, including the following:
When you start XV, you will see the title screen if you don't give it an image to view. Otherwise, the image will appear in a window. This window is shown in figure 10.1.
Figure 10.1 :The XV control window.
The top toolbar consists of six pull-down menus. These menus consist of the following:
XV also has a row of buttons down the right side. These allow for quick access to the file commands, such as Load, Save, and Print.
The row across the bottom has buttons to flip the image, rotate it, shrink or enlarge the image, grab an image from the screen, and crop the image.
XV allows you to change an image's characteristics and to convert between many different formats. It has many image manipulation features. XV cannot be used to create images, though; to do that requires a drawing package such as Microsoft Paint.
Lview PRO is another neat little image manipulator like XV. Lview PRO is available for the Windows systems. There is both a 16-bit and a 32-bit version for Windows 3.x and Windows 95. Lview PRO is available from http://www.std.com/~mmedia/lviewp.html.
Lview supports the following formats:
When Lview comes up, you will see a window like the one shown in figure 10.2.
Figure 10.2 :Lview PRO window.
Along the top of the windows, you will see five pull-down menus. They include the following:
Lview also has a toolbar along the right side of the image that allows most of these functions to be activated with just a click. This allows the user to get at functions without having to select from the menus.
| NOTE |
Lview, like XV, is an image manipulation program. It is not used to create the images. To create images requires a drawing program such as Paint Shop Pro. |
Paint Shop Pro is a shareware graphics tool. It allows editing, screen capture, and simple image manipulation. It does not allow the fine tweaking of the image that Lview does, but it can be used as a drawing package. Paint Shop Pro is available from ftp://ftp.the.net/mirrors/ftp.winsite.com/pc/win95/desktop/psp311.zip. There is a $69 license fee if used for more than evaluation purposes.
Once Paint Shop Pro is installed and run, you will see a screen similar to the one in figure 9.12. The following pull-down menus appear across the top bar:
Paint Shop Pro also has a toolbar that allows you to perform common actions. These include opening and saving files, printing the image, cutting, copying, and pasting. Paint Shop Pro can also be used to read images in from a scanner.
Paint Shop Pro has three panels. These panels include the zoom tool, select tool, and paint tool. These tools allow quick access to common actions. Paint Shop Pro is shown in figure 10.3.
Figure 10.3 :Paint Shop Pro has menus, toolbars, and panels.
Paint Shop Pro can load and save in many different formats. These formats include the following:
Imagemaps are graphics images that contain "hotspots" in them. When you click the hotspot, you are taken to a new page or document. This can be used instead of normal text links to create a more natural effect.
| NOTE |
On a slow network, such as accessing the Internet with a modem, imagemaps may take a long time to download. If an imagemap takes too long to download, it detracts from the page rather than enhancing it. You should always have an alternate way for people to access a link because not all browsers can support imagemaps. If your company has standardized on a browser that supports imagemaps and no one will be using a different browser, you may be able to get away with not having a text alternative. |
There are two different types of imagemaps: client-side imagemaps and server-side imagemaps. Client-side imagemaps are processed by the browser but are supported only by the newest browsers. Server-side imagemaps are processed by the server, but not all servers support them.
Both types of imagemaps will appear the same to a user because the browser and servers handle the processing. When designing imagemaps, make sure it is clear where the hotspots are defined. This can be done by outlining the hotspot or by using a specific color. Imagemaps also usually have a default region. This is anywhere that is not a hotspot and can be specified to go to a specific URL.
When creating an image to use as an imagemap, you should note the coordinates of the hotspots. Write down the vertices of the shapes for later reference. For the following shapes, you will need the following coordinates:
You will need these coordinates later when you create the map file.
Let's take a look at the different imagemap formats, both client-side and server-side, to see how they work.
Server-side imagemaps are images that the browser is told are imagemaps. This is done by using the ISMAP tag inside the IMG tag. This would be a server-side imagemap:
<IMG SRC="imagemap.gif" ALT="Imagemap" ISMAP>
When the browser gets an image that is defined as an imagemap, it sends back the X and Y coordinates of the mouse pointer when it is clicked. In other words, when you click an area of the map, the X and Y coordinates are sent back to the server. The server then decides which URL to send back to you.
Server-side includes usually require some configuration on the server end. You will also need to create a map file. This map file is used to tell the server which URL to send back for the coordinates the users selected. A map file is usually of the following form:
RECT <URL> Upper_Left(x,y) Lower_Right(x,y) CIRCLE <URL> center(x,y) Edge_Point(x,y) POLY <URL> vertex1(x,y) vertex2(x,y) vertex3(x,y)... DEFAULT <URL>
As you can see, there are three shapes that can be defined: a rectangle, circle, and polygon. There is also a line that sets the default URL if the user clicks an undefined region. These shapes are not case sensitive; RECT, rect, and ReCt are all the same, like HTML tags, though most designers use all uppercase to make it easier to read.
A sample map file might look like this:
RECT http://www.server.com/offices/office1 10,10 20,20 RECT http://www.server.com/offices/office2 20,10 30,20 RECT http://www.server.com/offices/office3 10,20 20,30 RECT http://www.server.com/offices/office4 20,20 30,30 DEFAULT http://www.server.com/offices/list
| NOTE |
Some servers may use the words "RECTANGLE," "CIRCLE," and "POLYGON" instead. Check your server documentation if you are having problems. |
Most servers also have an imagemap.conf file. This file tells the server which imagemap file goes with each imagemap image. The syntax for this file is
image_name : physical path
| NOTE |
The path to the map file is the physical path, not the URL to the map file. |
A sample imagemap.conf file may look like this:
officemap : /imagemaps/office.map product1 : /imagemaps/prod1.map buttonbar : /images/button.map
When adding an imagemap to a document, you need to reference the map file that is to be used. This is normally done by passing the map file as the argument to an HREF tag. For example:
<A HREF="officemap"> <IMG SRC="offices.gif" ISMAP> </A>
This will use the imagemap map file for officemap to decide which URL to go to when the user clicks a point in the offices.gif file. This assumes your server can automatically handle imagemaps. If your server needs to call a separate CGI program, then you would use something like
<A HREF="/cgi-bin/imagemap/officemap"> <IMG SRC="offices.gif" ISMAP> </A>
Having the server process the imagemaps can lead to performance problems if your server is already heavily loaded. Client-side imagemaps cause the client to process the coordinates and to request the correct link.
Documents that contain client-side imagemaps have the map file included in the document. There are currently two ways to handle this. One way is by using the MAP and AREA tags, and the other uses the FIG tag.
The MAP and AREA tags are used to define the coordinates that were previously stored on the server in the map file. Once you have defined a map region, you also give it a name in the HTML file. The IMG tag has also been changed to add a USEMAP tag. This is used to define where the map regions are defined. A sample application follows:
<MAP NAME="offices"> <AREA SHAPE="RECT" COORDS="10,10,20,20" HREF="http:// www.server.com/offices/office1"> <AREA SHAPE="RECT" COORDS="20,10,30,20" HREF="http:// www.server.com/offices/office2"> <AREA SHAPE="RECT" COORDS="10,20,20,30" HREF="http:// www.server.com/offices/office3"> <AREA SHAPE="RECT" COORDS="20,20,30,30" HREF="http:// www.server.com/offices/office4"> </MAP>
The first line names this map region "offices"; this is used by the USEMAP attribute to define which region to use. The AREA tags define the shapes, coordinates, and HREF that were used in the server's map file. The last line simply ends the map region.
When the imagemap is placed, either in this file or in another file, the USEMAP points to this area. For example, if the USEMAP were in the same file as the map region:
<IMG SRC="offices.gif" USEMAP="#offices">
Or if they were in different files:
<IMG SRC="offices.gif" USEMAP="file.html#offices">
The MAP and AREA tags were developed by Spyglass while they were developing a version of Mosaic that could handle imagemaps without the use of a server.
The other alternative uses the FIG tag instead of the MAP and AREA tags. The FIG tag defines a figure that is to be used as an imagemap. The text between the <FIG> and </FIG> is shown to browsers that can't handle imagemaps. It is also used as the map coordinates.
This is done by adding to the HREF tag a SHAPE. The SHAPE consists of the shape name and the coordinates. An example of a client-side imagemap using the FIG tags is
<FIG SRC="offices.gif"> <B>Select an office to view</B> <UL> <LI> <A HREF="http://www.server.com/offices/office1" SHAPE="RECT 10,10,20,20">Office number 1 <LI> <A HREF="http://www.server.com/offices/office2" SHAPE="RECT 20,10,30,20">Office number 2 <LI> <A HREF="http://www.server.com/offices/office3" SHAPE="RECT 10,20,20,30">Office number 3 <LI> <A HREF="http://www.server.com/offices/office4" SHAPE="RECT 20,20,30,30">Office number 4 </UL> </FIG>
One of the nice things about the FIG tag is that browsers that can't do client-side imagemaps will get the text between the <FIG> and </FIG>. By making this a nice list, any browser can view this page and navigate from it.
Imagemaps have normally been abused on the Internet. Companies may have a 70K imagemap leading to three or four links with no alternative navigation for users who don't have graphical browsers or choose to not load images. This has caused imagemaps to get a bad reputation.
Imagemaps can be useful in both the Internet and Intranets if they are used properly. There are a few rules to follow when using imagemaps.
Those rules aside, imagemaps do have some very beneficial uses in an Intranet. They are very useful for explaining an image, for example. Imagemaps are also useful in places where geography is important in deciding which URL to follow. Following are a few examples of where an imagemap would fit into an Intranet setting:
Creating imagemaps requires drawing the image, figuring out the hotspots' shapes and coordinates, and writing the map file or document. Fortunately, there are tools that can be used to map the image for you. These tools will also generate a server-side or client-side map file. Most tools can handle either GIF or JPEG files and can write server- or client-side map files.
Map THIS! is a freeware Imagemap tool. It was created by Todd C. Wilson and can run on 32-bit Windows machines such as Windows 95 or Windows NT. It can handle GIF or JPEG image formats. Map THIS! can also create either server-side or client-side imagemaps.
| NOTE |
Map THIS! is available from http://www.ecaetc.ohio-state.edu/tc. |
When you start Map THIS!, you will see a screen with menus across the top and two toolbars. Most of the features can be used from the toolbar. This includes the circle, rectangle, and polygon tools. Figure 10.4 shows MapTHIS! in action.
Figure 10.4 : MapTHIS can be used to create client-side or server-side images.
You can use any of these tools to outline the hotspots. Once a hotspot is defined, you need to go into mapping and define a URL for it to use. The tools allow you to start at a vertex, or an edge for the circle, and drag away to the other side or another vertex to define a spot.
When defining many hotspots, it is easy to get confused and forget which ones you have already defined. Map THIS! allows you to turn on shading. This will automatically shade in the hotspots that have been defined. You can also enable the area list. This will tell you which shapes have been defined and where they will link to.
You can also work with multiple images with Map THIS! You can choose to cascade or tile the windows. You can also zoom in or out with this tool.
When saving the map file, you will be asked if you are saving a client-side or server-side imagemap. If you choose server-side, you will be asked if it is NCSA or CERN style. If you choose client-side, it will ask you for a file to store the HTML in.
Map Edit is a shareware imagemap tool. It is available from http://www.boutell.com/mapedit. It can be used for evaluation for 30 days. After this time, you need to license it and pay the $25 licensing fee.
Map Edit can handle GIF and JPEG formats. It can also create server-side or client-side imagemap map files. The server-side files can be in either NCSA or CERN style.
Map Edit consists of three menus: File, Tools, and Help. File allows you to save, open, and use other file options. It also contains the Default URL option. This is used to define a default action in case the user clicks an empty region.
When you open a file, Map Edit will ask if this is for a server-side or client-side imagemap. If you choose server-side, you will be prompted for the format, either NCSA or CERN. If you choose client-side, you will be prompted for the file to write the HTML code in. You also need to tell it which image to use for the imagemap.
The Tools menu consists of three tools: circle, rectangle, and polygon. These, of course, correspond to the three shapes available to imagemaps. To trace out an image, select the tool that describes the shape you want. Select a corner, or the center (for the circle tool) and click the left button. For circles, you can drag out the circle until you get to the edge, then click the right button to define the region. For the rectangle, you still drag out until the outline covers the area you want defined, then click the right button. Clicking the right button defines the outlined region as a hotspot.
Polygons will need to be defined by going to each vertex in succession and clicking the left button. When you get to the last one, click the right button. This will define the region. If you decide to cancel the trace before you finish it, you can simply press the Esc key.
Once a region has been defined, a prompt box will pop up and ask you for the URL to link to. You can also enter a comment or description. You can continue adding regions until you are done. Then you can choose the Save option under the File menu.
Web Hotspots is another shareware imagemap tool available to Windows users. To register, it costs $49 plus $5 shipping and handling. You can download the evaluation copy from http://www.cris.com/~automata/hotspots.shtml. Web Hotspots was written by Keith Doty from 1Automata.
Hotspots supports GIF and JPEG images and can write both server-side and client-side map formats.
Web Hotspots has a series of buttons down the left side. These buttons allow you to quickly choose the tool you need. These include the usual circle, rectangle, and polygon. It also includes a free form tool. This allows you to draw a region freehand. This region is then automatically converted to a polygon by the software.
As you define a region, it is automatically shaded to let you see at a glance which regions have already been defined. After you define a region, you can simply add the URL to the URL line at the bottom of the screen.
Web Hotspots also allows you to rescale the image and rotate the image without having to save it, and start a drawing package to perform this. This makes Web Hotspots much more user-friendly.
Web Hotspots can also be used to move a region to the front of the map file. This is useful if you have regions that overlap, because the first region that a coordinate pair matches is used.