Using Images and Image Maps

Here are some commonly used FrontPage image and image map procedures. For the full set of FrontPage image and image map procedures, see “Using Images and Image Maps” in the Contents tab of the Microsoft FrontPage online Help system.

Û To Insert an Image from a File

When you insert an image from a file, the FrontPage Editor prompts you to import the image to your FrontPage web when you save the page.

You can insert the following types of images: GIF, JPEG (including progressive JPEG), Bitmap, PNG, Photoshop 3.0, WinFax, Kodak PhotoCD, Kodak FlashPix, TIFF, Windows Metafile, Sun Raster, Encapsulated PostScript, PCX, and Targa.

When you insert an image that is not in the GIF or JPEG format, it is automatically converted to the GIF format (for images with 8 bits or less of color) or the JPEG format (for images with more than 8 bits of color).

1. In the FrontPage Editor, click the page where you want to insert the image.
   
   
2. On the Insert menu, choose Image.

   

   From File button

3. In the Image dialog box, click the From File button.
   
   
4. In the Select File dialog box, use the Look In box and the box that lists files and folders to point to the file and folder where the image is stored. Choose a file type from the Files of Type drop-down field to list all the files of that type. Select the image you want to insert, then click OK.

Û To Insert an Image from the Current FrontPage Web

You can insert the following types of images: GIF, JPEG (including progressive JPEG), Bitmap, PNG, Photoshop 3.0, WinFax, Kodak PhotoCD, Kodak FlashPix, TIFF, Windows Metafile, Sun Raster, Encapsulated PostScript, PCX, and Targa.

When you insert an image that is not in the GIF or JPEG format, it is automatically converted to the GIF format (for images with 8 bits or less of color) or the JPEG format (for images with more than 8 bits of color).

1. In the FrontPage Editor, click the page where you want to insert the image.
   
   
2. On the Insert menu, choose Image.
   
   
3. In the Image dialog box, select an image to insert it. To browse the contents of a folder, double-click it.
   
   
4. Click OK.

Û To Insert an Image from the World Wide Web

When you insert an image from the World Wide Web, the image is always retrieved from its location on the World Wide Web. You are not prompted to import images inserted from the World Wide Web.

1. In the FrontPage Editor, click the page where you want to insert the image.
   
   
2. On the Insert menu, choose Image.

   

   World Wide Web button

3. Click the World Wide Web button.

   This opens your Web browser.

4. In your Web browser, surf to the image that you want to insert and then return to the Image dialog box.
   
   
5. Click OK to insert the image.

Û To Import an Image to a FrontPage Web

When you import an image, you place a copy of it in your FrontPage web. To quickly import one or more images to the current FrontPage web, drag them from your desktop into the Folders, All Files, Navigation, or Hyperlinks view of the FrontPage Explorer. To import images to an import list, from which you can rename them and import them into the FrontPage web, do the following:

1. In the FrontPage Explorer, on the File menu, choose Import.
   
   
2. To add an image to the import list, click Add File. In the Add File to Import List dialog box, use the Look In box and the box that lists files and folders to point to the folder where the image is stored. Select the image, and click Open.

   To add the entire contents of a folder to the import list, click Add Folder. In the Browse For Folder dialog box, locate and select the folder, and click OK.

3. To change the URL of any image before importing it, either to rename it or to change the image’s directory in the FrontPage web, click Edit URL to open the Edit URL dialog box.

   In the File location within your FrontPage web field, type a URL relative to the root of the current FrontPage web. For example, if you type the URL images/picture.gif, the image will be saved in the folder images below the root folder of the current FrontPage web. After changing the URL, click OK.

4. To import the images and other files on the import list to the FrontPage web, click OK. While files are being imported, you can stop the process by clicking Stop.

Û To Create a Circular Hotspot

A hotspot is a region on an image that is a hyperlink.

1. In the FrontPage Editor, select the image.

   The Image toolbar automatically displays when you select an image.

   

   Circle button

2. Click the Circle button.
   
   
3. Point inside the image.

   The pointer becomes a pencil.

4. Point to the center of the circular hotspot you want to create.
   
   
5. Drag the circular hotspot until it is the size you want.

   When you release the mouse button, the Create Hyperlink dialog box opens.

6. In the Create Hyperlink dialog box, specify the target of the hyperlink.

Û To Create a Rectangular Hotspot

A hotspot is a region on an image that is a hyperlink.

1. In the FrontPage Editor, select the image.

   The Image toolbar automatically displays when you select an image.

   

   Rectangle button

2. Click the Rectangle button.
   
   
3. Point inside the image.

   The pointer becomes a pencil.

4. Point to the first corner of the rectangle you want to create, then click.
   
   
5. Drag the rectangle until it is the size you want.

   When you release the mouse button, the Create Hyperlink dialog box opens.

6. In the Create Hyperlink dialog box, specify the target of the hyperlink.

Û To Create a Polygonal Hotspot

A hotspot is a region on an image that is a hyperlink.

1. In the FrontPage Editor, select the image.

   The Image toolbar automatically displays when you select an image.

   

   Polygon button

2. Click the Polygon button.
   
   
3. Point inside the image.

   The pointer becomes a pencil.

4. Click where you want the first corner of the polygon to be, then click to place each corner of the polygon.
   
   
5. Double-click to finish the polygon.

   The Create Hyperlink dialog box opens.

6. In the Create Hyperlink dialog box, specify the target of the hyperlink.

Û To Create a Text Hotspot

You can create a text hotspot on a GIF image.

1. In the FrontPage Editor, select the image.

   The Image toolbar automatically displays when you select an image.

   

   Text button

2. Click the Text button on the Image toolbar.

   A rectangular region appears on the image with a cursor in it.

3. Type the text you want.

   You can type a single line of text only.

4. To wrap the text, resize the text region by clicking and dragging its resize handles. Move the region by clicking and dragging any border.
   
   
5. Double-click an edge of the rectangle.

   The Create Hyperlink dialog box opens.

6. In the Create Hyperlink dialog box, specify the target of the hyperlink.

Û To Select a Hotspot

1. In the FrontPage Editor, click the image. The hotspots become visible.
   
   
2. Click a hotspot to select it or drag over a portion of the image to select more than one hotspot.
   
   
3. Use TAB and SHIFT+TAB to move between hotspots.

Û To Set an Image’s Default Hyperlink

An image's default hyperlink is the target of a hyperlink for any area that does not have a hotspot.

1. Click the image to select it.
   
   
2. On the Edit menu, choose Image Properties.
   
   
3. In the General tab, enter the default hyperlink’s target as a URL in the Location field or click Browse to specify the default hyperlink’s target in the Create Hyperlink dialog box.
   
   
4. After creating the hyperlink, click OK to close the Image Properties dialog box.

Û To Edit an Image

• From the FrontPage Explorer or Editor, double-click an image to open it in its associated image-editing program.
  
  
• In the FrontPage Editor, select the image and use any of the image editing commands on the Image toolbar.

Û To Add Text to an Image

1. In the FrontPage Editor, select an image.

   The Image toolbar automatically displays when you select an image.

   

   Text button

2. Click the Text button on the Image toolbar.

   If the image is a JPEG image, the FrontPage Editor prompts you to convert the image to GIF format, because text is not supported on JPEG images. If FrontPage converts the image, the number of colors in the image may be reduced and the image file may become larger.

3. Type the text into the rectangular region that is displayed on the image.
   
   
4. Resize the text region by clicking and dragging its resize handles, or move the region by clicking and dragging any border.

Adding text to an image does not change the image file in your FrontPage web.

Û To Insert Clip Art

FrontPage includes the Microsoft Clip Gallery, a tool for previewing and inserting clip art, pictures, sounds, video clips, and animations.

1. In the FrontPage Editor, click the page where you want to insert the clip art.
   
   
2. On the Insert menu, choose Clipart.

   This opens the Microsoft Clip Gallery.

3. In the Clip Gallery select an image, picture, sound file, or video, and click Insert.

Û To Make a Color in an Image Transparent

Making a color in an image transparent lets the background of the page show through the image where that color was. An image can have only one transparent color. If an image already has a transparent color, selecting a new transparent color returns the current transparent color to its original color.

1. In the FrontPage Editor, select an image.

   The Image toolbar automatically displays when you select an image.

   

   Make Transparent button

2. Click the Make Transparent button. The pointer changes to the Make Transparent pointer.
   
   
3. In the image, click a color to make it transparent.

   If the image is a JPEG image, the FrontPage Editor prompts you to convert the image to GIF format, because transparency is not supported in JPEG images. If FrontPage converts the image, the number of colors in the image may be reduced and the image file may become larger.

Û To Crop an Image

When you crop an image, you exclude all parts outside of a rectangular area.

1. In the FrontPage Editor, select the image.

   The Image toolbar automatically displays when you select an image.

   

   Crop button

2. Click the Crop button on the Image toolbar.

   FrontPage displays a cropping rectangle superimposed over the image.

3. Resize the cropping rectangle and press Enter.

Û To Resample an Image

Resampling an image changes the file size of the image to match the current size in which it is displayed. You can resample an image to a larger or smaller size.

1. In the FrontPage Editor, select the image.

   The Image toolbar automatically displays when you select an image.

2. Select one of the resizing handles and stretch or shrink the image.

   

   Resample button

3. Click the Resample button on the Image toolbar.

Û To Convert an Image to Black and White

1. In the FrontPage Editor, select the image.

   To convert the page’s background image you do not need to select it.

   

   Black and White button

2. Click the Black and White button on the Image toolbar.

Û To Rotate an Image

1. In the FrontPage Editor, select the image.

   To rotate the page’s background image you do not need to select it.

2. Do one of the following:

   

Rotate Left button

• To rotate an image 90° counter-clockwise, click Rotate Left on the Image toolbar.

  

Rotate Right button

• To rotate an image 90° clockwise, click Rotate Right on the Image toolbar.

  

Flip button

• To turns an image upside-down, click Flip on the Image toolbar.

  

Reverse button

• To reverse an image sideways, click Reverse on the Image toolbar.

Û To Adjust an Image’s Contrast

1. In the FrontPage Editor, select the image.

   To adjust the page’s background image you do not need to select it.

   

   More Contrast button

2. Do one of the following:
   • To increase contrast, click More Contrast on the Image toolbar.

     

   Less Contrast button

   • To decrease contrast, click Less Contrast on the Image toolbar.

Continue using these buttons until the contrast is correct.

Û To Adjust an Image’s Brightness

1. In the FrontPage Editor, select the image.

   To adjust the page’s background image you do not need to select it.

   

   More Brightness button

2. Do one of the following:
   • To increase brightness, click More Brightness on the Image toolbar.

     

   Less Brightness button

   • To decrease brightness, click Less Brightness on the Image toolbar.

Continue using these buttons until the brightness is correct.

Û To Washout an Image

Washing out an image reduces its brightness and contrast. This is especially useful for page-background images.

1. In the FrontPage Editor, select the image.

   To washout the page’s background image you do not need to select it.

   

   Washout button

2. Click the Washout button on the Image toolbar.

Û To Add a Beveled Edge to an Image

A beveled edge slants the border of an image, producing a three-dimensional effect.

1. In the FrontPage Editor, select the image.

   To bevel the page’s background image you do not need to select it.

   

   Bevel button

2. Click the Bevel button on the Image toolbar.

Û To Reset an Image

If you do not like the results of one or more image editing commands, you can undo them. This undoes all image editing commands that have been applied to the image since the last time it was saved or, for a new image, since it was inserted on the page.

1. In the FrontPage Editor, select the image.

   To reset the page’s background image you do not need to select it.

   

   Reset button

2. Click the Reset button on the Image toolbar.

Û To Create a Thumbnail Image

A thumbnail image is a small version of an image on a page that contains a hyperlink to a full-size version of the same image.

1. In the FrontPage Editor, select the image.
   
   
2. On the Tools menu, choose AutoThumbnail.

FrontPage creates the thumbnail image, inserts it in place of the larger image, and creates a hyperlink to the full-sized image from the thumbnail image.