Paul McFedries' Web Home


The cover of The Complete Idiot's Guide to Create a Web Page The CIGHTML Mailing List
Frequently Asked Questions - Graphics
Main FAQ page

How do I get one image to change into another image by holding the mouse pointer over it?

This is called a mouseover and it's done with JavaScript. I have a script suitable for just one or two images and another script suitable for a larger number of images.

How do I create thumbnail images?

A thumbnail is just a smaller version of an existing image. What you need to do is load the original image into a graphics program and then use the program's "Resize" command to scale down the image to an appropriate size (which depends on the original image). Then use the program's Save As command to save the smaller image under a different name. I usually just add "-thumbnail" to the name. For example, if the original is mypic.jpg, I name the smaller version mypic-thumbnail.jpg.

To use the thumbnail, put it in your page with an <IMG> tag, and then set up that image as a link to the normal size file. Here's an example: 

<A HREF="mypic.jpg">
<IMG SRC="mypic-thumbnail.jpg">
</A>

Why doesn't my image appear when I view my page in the browser?

The fact that you're not seeing your image is probably due to one of the following reasons:

  • If you're viewing your page on your home machine, the HTML file and the image files may be sitting in separate directories on your computer. Try moving your image files into the same directory that holds your HTML file.
  • If you're viewing your page on the Web, make sure you sent the image files to your server.
  • Make sure you have the correct match for uppercase and lowercase letters. If an image is on your server and it's named "image.gif", and your IMG tag refers to "IMAGE.GIF", your image won't show up. In this case, you'd have to edit your IMG tag so that it refers to "image.gif".

How can I reduce the size of a GIF or JPEG file?

There are a number of techniques you can try:

  • Use a graphics program to reduce the size of the image.
  • If the image is a GIF, use a graphics program to reduce the number of colors the image uses.
  • If the image is a JPEG, use a graphics program to either reduce the number of colors or increase the image compression.
  • Use a Web-based image optimization service. There's a good one at the Web Site Garage.

How do I make the background of a GIF transparent in LView Pro?

To make the background of a GIF transparent in LView Pro, follow these steps:

  1. Open the GIF in LView.
  2. Pull down the Retouch menu and select the Background Color command.
  3. In the dialog box that appears, click on the color that you want to be transparent. For example, if the background of your image is white, click the white color square.
  4. Click OK.
  5. Pull down the File menu and select Save As.
  6. In the "Save as type" list, select GIF 89a and then click Save.

How do I make the background of a GIF transparent in Paint Shop Pro?

To make the background of a GIF transparent in Paint Shop Pro, follow these steps:

  1. Select Colors | Set Palette Transparency. (Tip: Only run this procedure once you've finished working with the image.)
  2. If PSP mumbles something about reducing the number of layers and colors, click Yes and then click OK in the Decrease Color Depth dialog box.
  3. In the Set Palette Transparency dialog box, activate the "Set the transparency value to palette entry" option.
  4. Move the mouse pointer into the image and then click the color that you want to be transparent.
  5. Click OK.
  6. Save your file as a GIF.

Is it possible to change the color of the border that appears around images used as links?

The image link border color is the same as the regular link color. Therefore, you can change the border color by using the LINK, ALINK, and VLINK attributes in the <BODY> tag. For example, if you want a red border, you'd use this:

<BODY LINK="#FF0000" ALINK="#FF0000" VLINK="#FF0000">

How do I get text to wrap around an image?

Add one of the following to your <IMG> tag:

  • ALIGN="LEFT" Aligns the image on the left side of the screen. Subsequent text wraps around the right side of the image.
  • ALIGN="RIGHT" Aligns the image on the right side of the screen. Subsequent text wraps around the left side of the image.

When I'm using an image as a link, how do I remove the border around the image?

Add BORDER="0" to your <IMG> tag, as in this example: 

<A HREF="something.html">
<IMG SRC="jiffy.gif" BORDER="0">
</A>

How do I make an image map with weird shapes, not just the usual rectangle, circle, or polygon?

You need to create a server-side image map, which requires a special program. Here are some to check out:

Image Mapper
LiveImage
Mapedit
See also the Yahoo! image map index.

I'm an AOL user and my uploaded images are distorted. What's the problem?

AOL compresses uploaded images, which causes problems for some files. There's a full explanation on the AOL Webmaster Info site. When you get there, click Graphics Info and then AOL Compression.

How can I prevent users from stealing my Web page images?

This is extremely difficult, if not impossible, to do. However, here are three things that can help:

  • Put a strongly-worded copyright message on all of your pages.
  • Disable the right-click functionality that most image thieves use to grab graphics. I have a script that shows you how to do this.
  • Add a "digital watermark" to your images. See the Digimarc Corporation.

How do I reduce the size of a photo or other high-quality image?

The best thing to do to reduce the size of a photographic image is to convert it to the JPEG format. JPEG enables you to "compress" an image without losing much of the quality. In most cases, you can reduce the image size (in kilobytes) to a tenth of its original girth or less. I usually use Paint Shop Pro for this (it's on the book's CD):

  1. Open the GIF image in Paint Shop Pro.
  2. Select the File > Save As command to open the Save As dialog box.
  3. In the "Save as type" list, choose the "JPEG - JFIF Compliant" item.
  4. Click the Options button.
  5. Enter a value (say, 50) in the "Compression factor" box (or drag the slider below it back and forth).
  6. Click OK to return to the Save As dialog box.
  7. Click Save.
You'll probably need to try this whole procedure several times using different values for the compression in step 5. Start with 50% and work higher in, say, increments of 10%. After each save, check the right hand side of the status bar to see the size of the image in kilobytes (KBytes). Also, check the quality of the image in the browser. The idea is that you want to compress the image as much as possible while still maintaining acceptable quality.

Why does it take so long for my mouseover images to appear?

The first time you hover the mouse over an image, the browser has to download the new image from the server, which can take time. The easiest way to reduce that time is to use smaller images. If that's not practical, you can also "pre-load" all the images. This means that the images are loaded into memory when the page is loaded, so they appear immediately when the user places their mouse over the image. See my third mouseover tutorial to learn how to pre-load images.

How can I slice up a large image to put in a table or use as an image map?

The easiest way I know is to use the Picture Dicer program.

How do I get those little banners to pop up when the user puts their mouse over an image?

Add ALT text to your <IMG> tag:

<IMG SRC="vacation12.gif" ALT="This is a picture of me getting mugged in Marrakesh">

Most modern browsers will display that text as a banner when the mouse pointer sits over an image for a second or two.

Main FAQ page

Copyright © 1995-2008 Paul McFedries and Logophilia Limited