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 Studio to make these elements part of your site.
Studio 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.
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 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:
![]() |
To add a client-side image map: |
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.
![]() |
To access the Image Map Editor: |
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.
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.
![]() |
To create a circular or rectangular hot spot: |
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. |
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.
![]() |
To create a polygon hot spot: |
![]() |
To move a hot spot: |
![]() |
To resize a hot spot: |
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.
![]() |
To edit the link for a hot spot: |
![]() |
To delete a hot spot: |
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.
![]() |
To change the zoom of the image: |
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.
![]() |
To save the map definition information: |
The map definition information is entered in the Content tab in the Tag Editor - MAP dialog box.
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.
Studio 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.
You can add video clips in AVI format to your Web pages using the Image dialog box.
![]() |
To add a video file to your Web page: |
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 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.
![]() |
To add a sound file to your Web page: |
Note | The BGSOUND attribute is a Microsoft Internet Explorer extension and will not work in Netscape Navigator and other browsers. |
Studio offers two wizards to help you add sound to Web pages:
http://www.real.com
.
Studio supports the Synchronized Multimedia Integration Language (SMIL) in the Tag Chooser (CTRL + E).
For more information on using SMIL tags in Studio, visit the SMIL page on the Allaire Web site: http://www.allaire.com/products/smil/
.