«sad.ark.tutorials.remote.rollovers»

This little action can be used in so many ways. Picture Galleries, Product Detail Photos, Navigation Directory Info, just to name a few ideas. Lots of ways this can be useful in giving more information without burning up lots of space. For this tutorial, I will assume you allready have some images you want to display. I made 9 and named them image_01.jpg etc. Let's get started.

Step One - Setup

You can use image thumbnails or text or buttons or whatever you want to trigger the image display. For this example I have simply made a 1x8 table, filled each cell with a transparent .gif. It is just as easy to use text. If you don't want to use an image, just type some text like 'Image One, Image Two' etc. In fact, I've added an 'Image 9' as a text link for the example. We'll make them work later. For now, just set up something to use as a trigger for your action. Here's what mine looks like.

Next, we need to determine the what and where our image is that we are going to be changing. Again, to keep it simple, I'm just making a 1x1 table to hold the images. Looks like this:

I've added a transparent image here as the default place-holder. This is important! You need a default image that the other images can reference and replace. Now we need to name the default image. Do so by selecting the image you are going to be replacing on your page. In my case, it's just a big transparent gif inside a table cell. I suppose you could have an image with text explaining to rollover your buttons etc. Anyway, With the image selected, go to the inspector pallet and click on the MORE tab. Down towards the lower section of the tab is a field called NAME. This is where we give our default image a unique name.

Notice in the example above, I have simply named mine 'blank' ( by unique name, I didn't mean it had to be something like Mazulshaniquaalumn, just nothing else can be named 'blank' or this wont work so make sure your other images are not named blank ). Moving on.

Step Two - Take Action!

Back to our grid of buttons we made earlier. Now we need to make the images that will control the remote rollover image. Start by selecting your first link or image. In the inspector pallet, make it a link by clicking on the little blue chain button. The field next to it will say 'empty reference'. Type a '#' in there as I've shown.

Now, with the image still selected, go to the actions pallet. For my page, I want my images to change when the user mouses over the button. I don't need them to click on it but this is up to you. 1) Select Mouse Enter in the event list. 2) Click on the new action button in the Actions list. 3) Now we tell GoLive what action we are going to be using. Do so by clicking on the Actions pop-up button and navigate to Image > Set Image URL like I've shown below.

Now you can set up the action. 1) First we need to tell GoLive which image we will be swapping with the action. Remeber in the first step when we named our default image 'blank'? This is where we tell GoLive that it is the image we are going to be changing. Do so by clicking on the Image pop-up and selecting 'blank'. 2) Next we need to tell GoLive what to replace 'blank' with. Use the link tool to find the image you will be swapping with. In my case, I found my image named 'image_01.jpg' and linked it.

Now that your mouse finger is all warmed up, you need to do this for the rest of the images. Select the next image and repeat this step. The only thing you will do different is assign it a different image in the link field of the action as shown above.

Have a look at what we've got so far. Take a close look at Image 9. Notice that it appears distorted. That is because it is not the same size as the image it is replacing. We'll fix that next.

Example One

Step Three - Different Image Sizes

My images are all the same size, 400x300 pixels, except for image 9. It is 400x199. When it gets displayed it is trying to make itself fit the size of the original image, which was our transparent gif called 'blank'. To fix this is really easy. Select your main image and in the inspector pallet under the basic tab, look for the settings I show below. Change these from pixel to image by using the pop up selection menus.

This will tell GoLive to use the size of the individual images and not the size of the original image when it changes them. Cool and easy to do! Thanks GoLive!

Here is an example of Image 9 fixed.
Example Two

But wait, while this works great and is cool, notice that the image always stays on the last one you moused over. What if you want it to always revert back to the original image? Well, that's a job for Step Four.

Step Four - Revert the Remote

Essentially, what we want is to say, when you mouse over this button, show this image, when your mouse leaves this button, show the default image again. Select our buttons again and go to the Actions Pallet. You will see a dot next to Mouse Enter in the Events list. This means we have an action assigned there. Now we are going to assign an action for Mouse Exit. Just like we did before, select Mouse Exit and then click on the new action button. Again, assign it the 'blank' image as before but this time, we tell it to link to the default image (see example below). For this final example, I made a new image so we can better see that it is getting reverted to. I named it 'mainimage.jpg' as you can see below, hope this doesn't confuse things. Sorry to say, we need to do this again for the remaining buttons.

And now we should have this:
Example Three

And by request, I'm adding an improvement to this tutorial. Preloading your images. An excellent request, especially for the big files I'm using here. Enter Step Five.

Step Five - Preloading Your Remote Images

In my example for this tutorial, I have used big images. These take time to download (in case you have not noticed). The downside to this is the poor response when you mouse over the image on a slower connection – you have to wait each time. It's like changing stations on my sattellite TV and getting the message "wait while acquiring signal..." Irritating. What we want to do is pre-load these images so they will be in the browser cache and be a little more responsive to the user.

To do this, we need to tell the page to load the extra images when the page loads. Sounds like we need a preload action in the head of the page, and that sounds like it's ugly but wait, its really not bad at all! Go to your objects pallet and select the Smart Objects button (Green Square - see below). Then find the Head Action Smart Object like I've indicated below. We need to drag this into the head section of our page.

So, for me, I'm going to my page that has the remote rollovers, and 1) Opening up the head section by clicking on the twistie arrow. Now I can see all the stuff going on in the head of my page. 2) This is where we want to drag the Head Action Smart Object. After dragging it over, it will look like this:

It is showing up as a question mark because we've told GoLive we want it to perform an action but it doesn't know what yet. Let's do this by clicking on the green question mark. Now look at your inspector pallet.

This is where we assign the action we want for the head section of the page. 1) We want our images to load when the page loads, so make sure the Execution menu is set to OnLoad like I've shown. 2) Now we need to tell it what action to use. This is where we have a small detour! Instead of going straight to the Preload Image action, we are going to use the 3) Action Group action. After selecting the Action Group action, the green question mark should look like this:

The Action Group action allows us to group a bunch of actions all together to be performed at the same time. In fact, let me quote from the GL Help documentation on this:

If you need to preload multiple images, rather than adding a new Head Action icon for each image, set up one Head Action icon with the Action Group action and add each Preload Image action to it.

So, we are going to make a group of preload image actions inside of this Action Group. I'm not sure if this actually makes for nicer code but, the work is about the same whether you use the Action Group or not. Since the manual says to, that's what we're going to do.

Now, 1) Click to create a new action in the Action Group we've set up. 2) Select the Preload Image action like I've shown above.

Next we need to tell the Preload Image action what image we want to preload. Click on the Preload Image action like I've shown above, and then assign it a link. I've told mine to preload my first image as you can see in step 2 above. We've done it! Alas, but only for one image. Now we have to do this for all of our images. Repeat the steps above to get this done. Since I have 9 images, that's right, I'll be doing this 9 times. In the end, mine looks like this:

One trick to be wary of: Since you can't really resize this pallet, it can be easy to click to make a new action but not see it. If you feel like you are loosing actions, be sure to use the scroll bar to make sure it is there and that you are not modifying the same action over and over. You can tell which Preload action you are on by looking at the link. Above I have Image 5 selected but that is the only way you'd know.

Finally, there are other options to using the actions included with GoLive. Nate Baldwin, a moderator of the Adobe U2U GL Forum, has some excellent actions at his website Mindpalette. Specifically, for this tutorial his Multi-Preloader 20 (preloads up to 20 images) action would be excellent. Instead of having to add a new action for each image as we have just done, you only need to load one action and then link all your images. Very nice! Also be sure to check out his Image Menu and Auto Image Window actions.
That's it! Thanks!