14 The Web

14.1 Transparent GIFs

There are many equally valid ways of generating a GIF with a transparent background index. For instance using ImageMagick, first display your GIF image using the display program. Choose Matte from the Image Edit command menu and identify a pixel with the cursor that has the colour you wish to make transpart. From the new menu select Method and choose the most appropriate method:

• point
  The point method changes the matte value of the selected pixel
• replace
  The replace method changes the matte value of any pixel that matches the color of the pixel you selected
• floodfill
  The most useful, floodfill changes the matte value of any pixel that matches the color of the pixel you selected and is a neighbour.

Select your transparent pixel with the pointer and press a button. The image is redisplayed with any transparent pixels recolored to the background color. You can select other pixels or areas to force to transparent. When you are satisfied, press Return.

Alternatively you can do this from the command line using the giftrans program available via anonymous FTP from ftp://ftp.rz.uni-karlsruhe.de/pub/net/www/tools/. The giftrans program is distributed as part of the STAR2HTML Starlink package and should therefore be available on Starlink supported systems.

To get a list of the current colourmap for the image use:

this shows the colour index, the RGB colour value in decimal/hexidecimal and (for some colours) an X Window colour name.

To set colour index zero a the transparent colour you would then use:

You can also specify the color as an RGB triple or an X Windows color name; invoke giftrans with the -? option to see a complete usage description.

If you intend to use GIF images on your web pages, you should make yourself aware of the legal position before proceeding.

14.2 Animated GIFs

Again there are may perfectly valid ways of going about this, see for instance the WhirlGIF program, discussed in Section 7.8.

Alternatively we can, make use of the ImageMagick convert application with the -delay and -page options. The -delay option is used to specify the delay in $1/100th$ of a second between the display of each frame of the animation. For example:

You can also declare specific delays for each frame of the image sequence. For example, if the delay was 20, 10, and 5, use:

Use -page to specify the left and top locations of the image frame:

If you want the image to loop within Netscape, use -loop option, for instance:

You can also use the convert application in the opposite sense to split a GIF animation into individual image files, e.g. 

The resulting image files are titled frame01.gif, frame02.gif, frame03.gif, etc.

If you intend to use GIF images on your web pages, you should make yourself aware of the legal position before proceeding.

14.3 Beveled Images

Again, most packages including the GIMP and ImageMagick will allow you to add borders to your image to make buttons.

The simplest method is using the GIMP. Make sure you are working on an RGB image (using Image$\to$RGB) and then select Script-Fu$\to$Decor$\to$Add Bevel. You’ll be queried as to the width of the bevel in pixels, and it will then be automagically generated for you.

14.4 “Web Safe” Colour Maps

Netscape predefines 216 colours for colour mapped (pseudo colour) workstations. When dithering an image into Indexed mode, the GIMP asks whether you want to use a WWW optimised palette. If you do so the image will be dithered to use the netscape colour map. ImageMagick has similar functionality implemented using the convert command, e.g. 

14.5 Browser support of PNG images

Due to the legal problems surrounding GIF images the PNG image standard has been put forward as its replacement. Unfortunately support for PNG images is still pretty patchy in the main stream browsers such as netscape. Details of the extent of PNG support implemented into the different browsers are listed at http://www.libpng.org/pub/png/pngapbr.html.