QuickTip: An Easier Way to Get GoLive to Manage your ImageReady Rollovers

Later on in this tip you will meet a regular expression which can be used to automate a big part of the process of managing ImageReady's native style of rollover code in GoLive, regardless of the number of images the rollover and all its states require. But we'd better get the caveats out of the way first.

The regular expression is intended to work with ImageReady rollovers. It shouldn't cause any problems with pages of this type. It hasn't yet caused any problems with any ImageReady code its been run against. If it does break anything in an ImageReady page, please send me the HTML output from ImageReady and I will look into it.

After undergoing a couple of modifications, it should not alter GoLive Javascript on the page, references in actions or smart Javascript objects. That's not a guarantee. There may be situations where it does. It may not break anything; then again, it might. Always make sure you have a backup available. You can send me the pages in question, though I can't promise I'll be able to modify the regular expression to suit.

Against pages containing third-party Javascript with quoted references to image URLs in it (any kind of functions to handle images and image states), it may add comments to it. Being comments, they may not break anything. Then again, there's always the possibility that they might. Then again, it might make the image URL references manageable in GoLive (which might be desirable, then again might not). Again you can send me the HTML page, but no promises.

In short, its only recommended you run it against ImageReady code. Against anything else, your mileage may vary.

One last thing. If you're planning on running it on any page which actually contains image URL references on the page, like this one, say, then make sure you use double quotes in the text. Otherwise, you'll end end up with unwanted comments, even before the critics get hold of it

john.donaldson@afterhours.org.uk

Adding comments to Javascript so GoLive will manage it: the basic process.

If you generate your rollovers from ImageReady using ImageReady's default Javascript coding style, the URLs in your Javascript will not be managed by GoLive. What does that mean? It means if you start moving things around without telling GoLive to manage the URLs in the Javascript, things are going to break. If you move the HTML page created by ImageReady into another folder, the URLs to your rollover state images will break, for example. Or if you use the HTML and Javascript as a component or as the basis of a template, any pages which are not at the same level of the site will not have the correct URLs for the rollover states' images (because GoLive cannot update these URLs to reflect the different location in relation to the folder storing the rollover images).

So, you need to tell GoLive to manage the URLs in the Javascript created by ImageReady before you do anything else in GoLive. You do that by adding little comment in front of the URL which GoLive recognises. It looks like this: /*URL*/

Let's have a look at some fragments of code generated by ImageReady :

if (document.images) {

      
      whats_fresh_slice_over = newImage("images/whats-fresh-slice-over.gif");

      
      recipes_slice_over = newImage("images/recipes-slice-over.gif");

      
      guest_chefs_slice_over = newImage("images/guest-chefs-slice-over.gif");

      [....]

      

      
      <A HREF="#" ONMOUSEOVER="toggleImages('recipes_slice', new Array('whats_fresh_slice', 'images/whats-fresh-slice-over.gif', 'recipes_slice', 'images/recipes-slice-over.gif', 'guest_chefs_slice', 'images/guest-chefs-slice.gif', 'events_slice', 'images/events-slice.gif', 'classes_slice', 'images/classes-slice.gif', 'about_us_slice', 'images/about-us-slice.gif', 'piccolo_orig_09'[....]'guest_chefs_slice', 'images/guest-chefs-slice.gif', 'events_slice', 'images/events-slice.gif', 'classes_slice', 'images/classes-slice.gif', 'about_us_slice', 'images/about-us-slice-over.gif', 'piccolo_orig_09', 'images/piccolo_orig_09-about-us-sl.gif'), '', new Array('whats_fresh_slice', 'images/whats-fresh-slice-over.gif')); return true;"

      [....]

On each occasion where the URL of a rollover state's image is referenced, we need to add the /*URL*/ prefix. So, our first fragment above would have to become:

if (document.images) {

      
      whats_fresh_slice_over = newImage(/*URL*/"images/whats-fresh-slice-over.gif");

      
      recipes_slice_over = newImage(/*URL*/"images/recipes-slice-over.gif");

      
      guest_chefs_slice_over = newImage(/*URL*/"images/guest-chefs-slice-over.gif");

      [....]

As the second fragment above (which has actually been condensed) makes clear, this could be a heck of a lot of work. Admittedly this is taken from a particularly complex set of rollovers. Its actually taken from the piccolo site.psd rollover example file which comes with Photoshop 7/ImageReady 7. It would actually take over 500 comment additions in the code generated from ImageReady to have GoLive manage all of the URLs referenced in the Javascript. But in general, the more rollovers there are in your design, the more replacements you are going to have to make in order to have GoLive manage the URLs and keep everything working as you intended. There must be an easier way than doing this by hand, right? Well, yes there is, thanks to GoLive's support for searching and replacing using regular expressions.

Before running the regular expression Find&Replace

Regular expressions are an extremely powerful way of making useful changes to web pages. Like anything else extremely powerful, they can be pretty dangerous as well. Make sure you can easily regenerate the page from the original ImageReady file, or make sure the site is currently backed up, including the rollover page. Also, make sure the image and folder names you are generating from ImageReady do not contain any apostrophes. It won't work if there are.

The regular expression Find&Replace

So, down to the bit you've been waiting for. Here it is.

Having saved the ImageReady page into the GoLive site (and refreshed) the site window, open the page. Switch to source mode and click in the top of the document, to place the cursor at the top of the page.

Now open GoLive's Find dialogue (Edit > Find or Ctrl-F). Check the Regular expression checkbox as shown below and add exactly the Find text and replace text shown in the screenshot. Make sure that Find in Files is NOT selected. We only want to run the regular expression find and replace on the one open page. Since ImageReady can save tags and attributes as either upper or lower case, check the Ignore Case checkbox as well. There are two spaces in the regular expression which you need to include and are hard to show on a screenshot. They are marked with a red dots in the screenshot below to make them stand out better. The red dots in the screenshot mean, hit the Spacebar (make sure its just the once).

Here is the regular expression find and replace in text form so you can copy and paste into GoLive if you prefer:

Find: ([^=/ ] *)(["'][^"']+\.(gif|jpg)["'])

      Replace: \1/*URL*/\2

Hit the replace all button in the Find dialogue.

When you do hit the Replace All button you will get a warning message from GoLive:

Hit OK. The message is a wee bit overly-dramatic. Hitting OK does not remove every chance you have of undoing the operation. If you close the file choosing not to save after the Find&Replace has completed, the changes will not be saved. You will still have your original file. Once you save, that's it. Changes are indeed permanent. But since it works, that's what you wanted anyway ;-)

And that's pretty much it. You just made your ImageReady rollovers manageable by GoLive. You can move the ImageReady generated page to the components folder, or anywhere else within the site safe in the knowledge that GoLive will update the URLs in the Javascript to make sure your rollovers keep rolling. You can move the images to a different folder; the image references will be perfectly safe.