golivebasics.com home page

The text swap action

With this action, you can have someone click a link, or hover over it, and real text will change to other text - not a gif, real text.

Try it on the right - the links do work, if you click them, use your browser's back button to come back here.

If you hover over them, the text changes to explain the link.

We could have made the link # (the null link) so clicking would just change the text, but we are doing two things at once.

By the way, you can only have one of these text swap actions on a page.

You can learn about lots of Golive techniques on this site, including:
Frames Popups Forms
Changing text
Caution: if you are using Golive 6, as I am, don't use any apostrophes or single quotes within the text you are going to change, or any of the replacing text. This is because these characters have a specific function in javascrript, and will interfere with the action. If you really want to use them, put a backslash - \ - immediately before each one to tell the javascript to ignore it. I understand this is not a problem in Golive CS.
There are several steps to making this action work:.
  1. Put in the text (or images) that will be the links, and the text that will appear before you start changing it.
  2. Create a new ID (don't panic, I'll show you).
  3. Apply this ID to the text which is to change.
  4. Make the links, and set up the Text Swap action on them.

1 Put in the 'triggers'. I have used three bits of text at the top of the page, 'Frames', 'Popups' and 'Forms'. Put in the text that will change.

The idea is, if people click, they go to that tutorial but as they first mouse over the links, the text below, 'Changing text' turns into a short description of the tutorial.

2 Click the staircase-looking icon, we are going to make a new ID.

Click the hash or pound sign #.

In the inspector, give it a name and set up how it should look - font, colour, size etc. If you're not too clear on css (cascading style sheets) you might want to check that out first here.

3 Now we must apply this ID to the text which will change.

To do this we need to go into the source editor (at the top of your page).

First select the text you want to change, then in source view you will be able to find it. Apply your ID like this - mine is called newtext, remember to use whatever name you chose. It should have no spaces or special characters, I stick to lower case letters. My ID is called 'newtext' without the quotes.

Back to layout view.

4 Now we deal with the links.

Select one chunk of text and make it a link - I'm assuming you want people to go somewhere when they click it. If not, if you just want to change the text, make the link the null link, #.

Then select the link text again and go to the Actions palette.

To make the action work when people hover over it, choose Mouse Enter, then hit the icon like a page with the corner turned to make a new link. Find your way to the TextSwap action.

Important - you must put in the name of your ID, as in the example on the right. Remember to use the name you chose!

Then enter the new text you want to appear.

Save and test.

Page 2 - change an image at the same time.

golivebasics.com home page