Adding Media Content

Well-integrated graphics, sounds, and video can make a site more attractive to visitors and can enhance the overall site content. This section show you how you can use HomeSite to make these elements part of your site.

Image files

HomeSite supports the most common Web graphics formats-- GIF, JPEG, and PNG-- but note that these formats are not supported by all browsers.

The easiest way to add images is to drag and drop an image file from a file list in the Resources pane into your document. You can also click the Image toolbutton on the QuickBar to open the IMG dialog box. First locate a source file, then enter values for the IMG tag attributes. The image is displayed in the dialog box's preview pane.

You can open the Style Editor to define formatting styles for the IMG element.

To add a background image for the entire document, use the BACKGROUND attribute of the document's BODY tag.

For a full description of the IMG tag and its associated attributes, properties, methods and events, see the <IMG> section of the HTML Reference in the Help References.

Tip For graphics files that you use often, such as navigation bars or icons, use Snippets to store and retrieve the code block.

Viewing image thumbnails

When you're working with many graphics files, it's helpful to be able to identify them visually. You can get a thumbnail view of all images in the current directory by clicking the Thumbnails toolbutton. The images appear in the Thumbnail tab of the Results window.

Right-click a thumbnail image to see its properties or to view it in Edit or Design mode, you can drag a thumbnail to add the image to your document.

Image maps

Image maps are graphics that contain "hot spots" that respond to user input, generally a mouse click. The hot spots can be mapped to both internal and external pages. Image maps can make navigation easier and give visitors visual cues to content areas.

Note The information in this section refers to creating client-side image maps only. Server-side image maps use the ISMAP attribute and require processing of the map definition file on the server. The map definition file must contain a script to connect via HTTP to the locations specified in the image map.

In order to create a client-side image map, you must:

Note To add a client-side image map:
  1. Add an image to your HTML page (you can use any of the standard methods such as drag and drop).
  2. Right-click the <IMG> start tag and choose Edit Tag from the menu to open the Image editor.

  3. Specify the USEMAP attribute:
  4. Click OK to apply your changes to the image.

If you chose to include the map definition information in the same document as the image, you can use the Image Map Editor to quickly enter that information. The Image Map Editor allows you to easily create hot spots, or "areas," and specify the pages to which those areas are linked. Once you have finished working with your image's hot spots, be sure to choose File > Save and Exit in the Image Map Editor to apply your changes to the HTML page.

Note To access the Image Map Editor:
  1. Enter a <MAP> tag in the Body of your HTML page.
  2. Right-click in the <MAP> start tag and choose Edit Tag from the menu to open the MAP Tag Editor.

  3. In the Image Map Name box, enter the USEMAP name you specified in IMAGE dialog.

    This step creates the link between the image you inserted on your HTML page and the map definition information that is used to process that image.

  4. Click the Content tab, then click the Image Map Editor button.

    You see the Image Map Editor.

    The image that is linked to this map definition is shown in the Image Map Editor.

    Tip You can also access the Image Map Editor by right-clicking inside an AREA tag and choose Edit Image Map from the menu. This is the easiest method to use if you already have map definition information in your document.

Once you have the Image Map Editor open, you can create a variety of hot spot shapes: rectangle, circle, and polygon.

Note To create a circular or rectangular hot spot:
  1. Click one of the hot spot shape buttons: circle or rectangle.

  2. Place the cursor over the image, hold the mouse button down and drag.
    Note Circles are always drawn proportionately. You can draw either a square or a rectangle using the rectangle tool. To draw a square, hold the SHIFT key down while you drag the mouse.

  3. Release the mouse button to finish the shape and see the Image Map Region Properties dialog box.

  4. Enter the URL for the page the hot spot jumps to in the HREF box (alternatively, you can browse the files on your computer or pick from your bookmarks or favorites).
  5. If you want alternate text to appear when the user's cursor travels over the hot spot, enter that text in the Alt Text box.
  6. Click OK.

    The hot spot is indicated on the image by a gray outline and the hot spot information is added to the thumbnails list on the right.

Note To create a polygon hot spot:
  1. Click the polygon hot spot button.

  2. Click inside the image to set the first point of the polygon.
  3. Move the cursor to the location for the next point and click again. Continue moving the mouse and clicking to set the remaining points for the polygon.
  4. To complete the polygon, click again on the first point or double-click and the polygon will be completed for you.
  5. After the polygon is completed, you see the Image Map Region Properties dialog box. Follow steps 4 through 6 above to fill in this dialog box and finish the hot spot.
Note To move a hot spot:
  1. Click the Select Region button on the toolbar.

  2. Move the cursor inside the hot spot you want to move.
  3. Click and hold the left mouse button down, then drag the hot spot to the new location.
  4. Release the mouse button when the hot spot is where you want it.
Note To resize a hot spot:
  1. Click the Select Region button on the toolbar.
  2. Click the hot spot you want to resize to select it. You see the hot spots handles.
  3. Click a handle and hold the left mouse button down, then drag the handle to the new location.
  4. Release the mouse button when the hot spot is resized.
    Tip Circles can only be resized proportionately. To resize a square or rectangle proportionately, hold down the SHIFT key while you drag a handle. You can move any of the handles on a polygon to change the shape and size of the polygon.

Note To edit the link for a hot spot:
  1. Double-click the hot spot outline on the image or double-click the hot spot in the thumbnails view. You see the Image Map Region Properties dialog box for the hot spot.
  2. Enter any changes and click OK.
Note To delete a hot spot:
  1. Click the Select Region button on the toolbar.
  2. Click the hot spot you want to delete to select it. You see the hot spots handles.
  3. Press the Delete key or choose Edit > Cut.

    The hot spot is removed from the image.

    Tip You can use the standard Windows Cut, Copy, and Paste commands to work with hot spot areas.

Note To change the zoom of the image:
  1. Choose the zoom percentage from the drop-down list.

    The image is redrawn.

    Note When you change the zoom in the Image Map Editor, you only affect your view of the image in the editor. You do not affect the size of the original image on your HTML page.

Choose Options > View Thumbnails to toggle the display of the hot spot thumbnails.

Note To save the map definition information:
  1. From the File menu, choose Save and Exit (Ctrl+S).

    The map definition information is entered in the Content tab in the Tag Editor - MAP dialog box.

  2. Click Apply.

    The HTML code is entered on your page. It should look similar to this:

    <IMG SRC="ImageMap.GIF" WIDTH=295 HEIGHT=380 ALT="" BORDER=0 USEMAP="#MyMap" ISMAP>

    <MAP NAME="MyMap">

    <AREA SHAPE="CIRCLE" COORDS="114,185,23" HREF="../../Virtual Source 1/Virtual 1.html" ALT="Virtual 1">

    <AREA SHAPE="CIRCLE" COORDS="173,182,23" HREF="../../Virtual Source 2/Virtual 2.html" ALT="Virtual 2">

    <AREA SHAPE="POLY" COORDS="148,328,219,304,238,337,221,376,149,346,84,370,56,333,78,308 ,78,308" HREF="../../Project 1/Manual Inclusive/Manual 1.html" ALT="Manual 1">

    </MAP>

    Tip If you accessed the Image Map Editor dialog box by right-clicking an AREA tag, you only have to choose File > Save and Exit to update the HTML.

OpenPix

HomeSite supports Hewlett-Packard's OpenPix ImageIgniter. This technology makes it possible to quickly deliver high quality, interactive images to Web pages. For more information, see the OpenPix article on Allaire's Developer site.

Video

You can add video clips in AVI format to your Web pages using the Image dialog box.

Note To add a video file to your Web page:
  1. Open the Image tag editor.
  2. Enter an image file name in the Source text box. This file displays as an alternate image if the user's browser cannot run the video clip.
  3. Click the Advanced tab, and enter the URL of the video file in the Dyn Source text box.
  4. In the Start box, select the user action that triggers the video.
  5. Check the Control box to display a control panel below the video window.
  6. In the Loop box, enter the number of times to play the video. To run the clip continuously, enter -1 or select the Infinite check box.
  7. In the Loop Delay box, enter a number for the time (in milliseconds) to pause between replays, and click OK.
Note The DYNSRC attribute of the IMG tag is a Microsoft Internet Explorer extension and will not display in Netscape Navigator or other browsers.

Sound

Sound adds an exciting dimension to Web pages -- to entertain, give audio cues, provide training instructions, or play audio files. You can add sound files in WAV, MIDI, or AU format.

Note To add a sound file to your Web page:
  1. Choose Tools > Tag Chooser and open the Page Elements list.
  2. Choose the BGSOUND tag for Internet Explorer, or the EMBED tag for Netscape Navigator.
  3. In the tag editor for the BGSOUND or EMBED tag, enter the sound file's source path and file name.
  4. In the Loop menu, choose either the number of times you want the file to play or Infinite for continuous play.
Note The BGSOUND attribute is a Microsoft Internet Explorer extension and will not work in Netscape Navigator and other browsers.

RealNetworks support

HomeSite offers two wizards to help you add sound to Web pages:

Using SMIL tags

HomeSite supports the Synchronized Multimedia Integration Language (SMIL) in the Tag Chooser (CTRL + E).

For more information on using SMIL tags in HomeSite, visit the SMIL page on the Allaire Web site: http://www.allaire.com/products/smil/.