Set HTML options to your preferences for the HTML file that ImageReady automatically generates.  Options  include Tags Case, Indent, Attribs Case, Line endings, Always Quote Attributes, Coding, Generate CSS, TD W,H, Spacer Cells, Empty Cells. Include Comments, Image Maps , and Code.

HTML Options  dialog box

Tags Case
Select from BODY, Body, or body to format Tags in all uppercase, first letter capitalized, or all lowercase.

Indent
Select from Tabs, None, or 1 to 8 Spaces to determine how Tags are indented.

Attribs Case
Select from ROWSPAN, RowSpan, rowSpan, or rowspan to format Tag Attributes in all uppercase, first letters capitalized, second word-first letter capitalized, or all lowercase.

Line endings
Select from Mac, Win, or UNIX depending on what platform you’re developing for.

Include Comments
Check Include Comments to force ImageReady to place comments in the HTML code it generates.

Include GoLive Code
If you are using Adobe’s GoLive web authoring program you may want to select this option.  The exported document will include any unique code generated by GoLive.

Always Quote Attributes
Check Always Quote Attributes to force ImageReady to place quotes around attribute values.

Generate CSS
If you’d like to have your image content exported as CSS Layer  you would select this option.  Layers  are still problematic because they can’t be viewed in all browsers.  Be sure you are aware of how CSS Layers work in HTML and which browsers support the feature before you use them.

Generate Tables
Selecting this option will force ImageReady to cut your document into slices and place them, in order, in an HTML table.  The following options apply if you have selected this option.

Empty Cells
Select from three methods of spacing empty cells.  GIF, IMG W&H, which fills  empty spaces with a 1 pixel transparent GIF, the width and height of which is set by IMG attributes (stretching a transparent GIF is a method of filling up table space for layout in HTML pages.)  GIF, TD W&H, which fills empty spaces with a 1 pixel transparent GIF, the width and height of which is set by TD attributes.  NoWrap, TD W&H to put width and height attributes with theTD tag and use the NoWrap attribute.  The most reliable method is GIF, IMG W&H.

TD W, H
Select from Auto, Always, or Never to determine if width and height data is included for table data.

Spacer Cells
Select from Auto, Always, or Never to determine if ImageReady adds one column and one row of blank or empty spacer cells around the table.

Image Maps
Select from Client-Side, NCSA Server-Side, CERN Server-Side, Client & NCSA, or Client and CERN to determine the Type of Image Map code ImageReady generates.  Image Maps  are covered later.  Consult your ISP or Systems Administrator for supported Map Types.  Client-Side is the most common and does not rely on specialized server settings to operate.

Filename Compatibility
Check Windows, Mac OS, and UNIX to ensure filenames are compatible with each Operating System.

Background Image
Check Copy background image when Saving to save a background image you specify in Background.  The Background is specified by selecting Background from the Options  drop-down menu.

Image Folder
Check Put Images in Folder and input the name of the subfolder (set to “images” by default) to specify where ImageReady will save the images it automatically generates relative to the location of the HTML file it generates.

Copyright
Check Embed Copyright to include Copyright information in the images that you can add using File/Image Info.

{Click} Saving Files Options  and input “contact” in the first field.  Select none for the second field, and rollover state for the third field.  Uncheck Copy background image when Saving and Embed Copyright.  Check Put images in Folder and leave the default folder name at “images.”  {Click} OK.

Make sure you’ve selected HTML and Images from the Save as Type drop down menu.  Call the file “buttons” and {Click} “Save.”  Open “buttons.html” in a web browser.  As you pass the mouse pointer over the button, it is replaced by the whiteType version.

If you examine the files in the “images” folder, you’ll notice that there are two files, contact.gif and contactover.gif, just as you specified in Output Settings.

Examine the HTML code in your browser or in your HTML editor of choice.  ImageReady has generated HTML and JavaScript  to create the Rollover effect.  Cut and paste the code into your new or existing HTML documents.  Remember that JavaScript must be placed in the HEAD of the HTML document.