WebBuild Express Tutorial - Formatting Links

Documentation

Building A Page

Formatting Links

Go to the Web for Updated Help Topics

Table of Contents

Index of Help Topics

Next Topic

Previous Topic

When you add hyperlinks to a page, you can format them in a variety of ways so that the links have designated effects when the cursor "hovers" over them. (Note: this will only work for viewers who use Microsoft Internet Explorer; users who have Netscape Navigator or Opera will not see these effects, although the links will still be active).

Below is an example of a text link and an image link with special formatting effects.

Text Link Image Link

Click here for a list of our services.

Formatting Text Links

To edit a text link, click anywhere within the text area that makes up the hyperlink (you will see the cursor appear as a vertical bar between the letters):

Now right-click on the link (or choose "Edit" from the menu) and choose "Links Anchors" and then "Edit" on the ensuing menus. You will now see the "Links and Anchors" screen with the settings that you chose when you created the link:

In this example, the link had originally been created the as an Internal Link. The page linked to is "Services".

Note the area in the lower left corner of the screen, "Hover Text". If you want the text link to appear different when a visitor's mouse hovers over it, click on the "Format" button.

You will now see the following screen, which you can use to format the hover text:

You can select a different font face, size, or color for the hover text, and you can choose to make the text bold, italic, and/or underlined. To do so, make your choices on this screen exactly as you do when formatting text. The only difference here is that for the hover effect to take effect, you must check the box in the "Apply" column in the middle of the screen.

Let's make the link in our example change to a bold face and deep red color when it is hovered over.

First, let's make it bold. On the hover text screen, click the Bold font style. (Note that the box in the "Apply" column will automatically be checked when you make a change in one of the properties to the right):

Note that the Font Color section is checked and the chosen color is shown. Now press the "Save Changes" on this screen and you will return to the main Links screen. Click "Save Changes" on that screen and the hover text settings will be stored in the system's database.

Here's how the completed link will look:

Click here for a list of our services.

Formatting Image Links

You can create a "hover" effect for image links by specifying an alternative image that will appear in place of the original image when the cursor is over it.

Here is a cell containing an image that has already been set up as a link to the "Services" page:

Left-click on the image to select it. Then right-click on the image, and choose "Links Anchors" and then "Edit" from the dropdown menus. You will see the "Links and Anchors" screen with the settings chosen when the link was originally set up:

Click on the "Browse" button in the "Hover Image section on the left. You'll see the standard WebBuild Express images screen:

Find the image you want to use for the hover effect. (If necessary, click on the "Add Image" button and locate the image on your PC). Then "OK" the screen. The new image will now appear when the original image is hovered over.

Here is what the link will look like when completed:

Now let's change the hover text color to a deep red. Click on the "Color Picker" button. You will see the WebBuild Express color "Wheel" that should be familiar by now. Use the Color Picker to select a deep red color (Hex code CC0033) and OK the screen.

The text link screen will now appear as shown below:

Tip

You can get to the Link edit screen quickly by double left-clicking on the link.