TechNote (Archived)

How can I bring ImageReady rollovers into Dreamweaver?

Adobe ImageReady 2.0 adds the ability to create interactive rollovers with JavaScript. It can be a little difficult to integrate this with HTML editors.

The easiest way is to export the HTML from ImageReady, and then to open this document in Dreamweaver for further design. Dreamweaver will respect the existing behaviors, even though it will not present an interface to customize them further. If you have to use ImageReady, then it's easiest if you can start the page from ImageReady rather than add its output to an existing HTML page.

If you have to use ImageReady, and have to add it to an existing page, then you'll need to integrate its HTML and JavaScript manually. These are commented-out in the ImageReady export. Be sure to put the image table in the BODY of your HTML, and the associated JavaScript functions in the HEAD of your document -- there are two separate copy/paste actions required.

Tips:

ImageReady can export JavaScript as either small scripts ("ImageReady style"), or as large scripts ("GoLive style"). The smaller versions are much preferred.
If you have already merged ImageReady's HTML into an existing document, and need to update this image table, then you would usually be able to take advantage of ImageReady's "Update HTML" menu command. It will need to find the existing ImageReady comments in your file, so your copying needs to be precise. (This will not insert HTML into a file which does not already have it, as in Fireworks... it will only update existing ImageReady tables.)
If you need to manually copy blocks of HTML and JavaScript into an existing complex page, then please be sure to save a backup copy of the file first.

If you already processed a photo with Adobe Photoshop and need to put rollovers in it for the web, you can use the "Insert HTML" menu item in Fireworks to put both markup and script into their correct locations in an arbitrary file, or use the "Copy HTML" command to let Dreamweaver paste both markup and script in their correct locations, or use the "Insert Fireworks" object in Dreamweaver to import and seamlessly merge markup and script into the current document. Fireworks works easily with a range of HTML editors, and very easily with Dreamweaver.