3.9.1.2. Adding and Removing Links

When adding and removing hyperlinks using Bistro you will use the two chain link buttons on the editing toolbar (see image below).

A hyperlink allows you to link from one place, item or selection of text on your website to another location or file. When a visitor clicks on the linked text or item, they are taken to the "target" of the link. The target may be on the same web page, on a different page on same website, or on a different website altogether. Since you can also link to a document or a file, clicking on a hyperlink may also open a target document, or play (for example) an audio file

3.9.1.2.1. Add a hyperlink

You can add a hyperlink to any text, image, or bookmark anywherre in your editing area. To do so

Highlight the text or image to which you want to add the hyperlink.
Click on the button that looks like two chain links on the toolbar and the Insert/edit hyperlink dialogue box will open to the General tab (the first of four tabs).

Once you have finished entering the desired information in all four tabs as described on the page which follows, click [Insert] at the bottom left of any of the 4 tabs to insert the link as you have defined it.

Using the tabs in this dialogue box, you can add a number of attributes and features to your link, and you can control the way the target page, site, or document you are linking to opens and behaves.

GENERAL TAB: Insert/edit Hyperlink

The first thing to do is enter or select your Link URL:

Type your link URL into the text field to the right of the first box on this tab called Link URL:. For external links, include the correct prefix (eg. http://).
To link to a document or file that has already been uploaded to your site (or one that you want to upload and link to), click on the small browse icon to the right of the Link URL: text field and the file manager will open.

To link to one of the files listed in the file manager, select it by clicking in the checkbox to the left of the file name.

To upload a new file, click on Upload at the top of the dialogue box and the upload file dialogue box will open allowing you to type in a filename or to browse your computer to find a file.

Once you have entered or located your file, click [Upload].

When your file has finished uploading, close the upload file dialogue box, select your uploaded file from the list (as above) then click the Insert link on the bottom left of the file manager dialogue box (below the preview box).

You will be returned to the General tab where you can continue to format your link.

If you have defined any Anchors: (also known as bookmarks) in your page, they will appear in the drop down list beside the second item on the General tab. To link to an anchor, just select it from the drop down list.

Note: instructions for adding anchors to your page are included in Using the WYSIWYG Editing Toolbar: Advanced Mode.

3. The next thing to do is define your Target: This applies when you are linking to a URL, file, or document (but not anchors).

You have four Target: options in this drop down list to select from; they are

Open in this window/frame: if you select this option, your link will open in the same window or frame so your website visitors will have to use the back button on their browser to return to the original page where they chose to click this link.
Open in new window (_blank): if you select this option, when your link is clicked, it will open in a new window, so your website visitors would close the new window (or switch between tabs if their browser supports tabs) to return to the original page where they chose to click this link.
Open in parent window/frame (_parent): if your site uses frames (not typical), this option will cause the link to open in the parent frame instead of the current frame (usually used for changing navigation tools, etc.).
Open in top frame (replaces all frames) (_top): if your site is using frames (not typical), this option will cause the link to open in a "top" frame that will replace all others.

4. The next option available on the General tab is Title: Although selecting a title is optional, what you type into this field will be read aloud for anyone using an audio browser, and will appear as mouseover text on the link for most regular browsers. Link titles are also used by search engines in their page ranking process.

5. The final option on the General tab of the Insert/Edit Link dialogue box is Class: If your web designer has defined CSS classes for your links, they will appear in the dropdown menu and can be selected. These classes define the way links appears on your website page (eg. what colour, underlined or not, etc.).

POPUP TAB - Insert/edit Hyperlink

You may choose to have your link open a popup window. Typically a popup window opens a new window on top of (or in front of) the original window. Most often the popup window is smaller than the original window, and leaves a portion of the original window visible behind the popup. Popups are often used as help windows, advertisements, or for special announcements.

When you click on the Popup tab in the Insert/Edit link dialogue box, you will switch to that tab.

If you want your link to open a popup, first select Javascript popup directly under the heading popup properties at the top of the tab by checking the checkbox. This will activate Javascript for your popup and allow you to define the rest of the attributes available on this tab.
Next, you will enter or select your Popup URL: Follow the same process described under the General tab for your Link URL:
The next option you have is to name your popup window. Naming your popup window is optional. What you type into this field will be read aloud for anyone using an audio browser, and will appear as mouseover text on the link for most regular browsers.
The Size: option allows you to define how big you want your popup window to be on the screen. Just enter the dimensions (width x height) in pixels into the text boxes.
With the Position: setting, you can also determine where on the screen your popup window will appear. For this option, enter the distance (in pixels) you would like the popup window to be offset from the top left corner of the browser window.

Your first entry will indicate how far from the left edge of the browser window (X axis) you want your popup to appear.

Your second entry will indicate how far from the top edge of the browser window (Y axis) you want your popup to appear.

You can also enter the letter c in each of the two text boxes to centre your popup window

6. In the Options area of the Popup tab, you can define how your popup window will appear on the screen by checking the options you wish to use. Note: if you include all of the "show" options below, your popup will appear like a typical browser window. If you leave all of the "show" options unselected, your popup window will look more like a typical popup advertisement.

Select show location bar if you want your popup window to include the URL address bar.

Select show menu bar if you want your popup window to include standard browser (text) menu bars.

Select show toolbars if you want your popup window to include standard browser (graphical) toolbars.

Select show status bar if you want your popup window to include standard browser status bars (typically at bottom).

Select show scrollbars if you want your popup window to include standard browser scrollbars (typically at right and bottom).

Select make window resizable if your want site visitors to be able to change the size of your popup window.

Select dependant (works in Mozilla/Firefox browsers only) if you would like your popup window to be a dependant of the original window where the link was clicked - otherwise it will remain open if the "parent' window is closed.

In most cased it makes sense to select insert false return. This is a Javascript option that turns off a default action when a popup exists. (eg. if you put a URL in the general tab as well as entering a URL in the popup tab, selecting this option turns off the General tab URL so that only the popup window opens when the link is clicked).

EVENTS TAB - Insert/edit Hyperlink (PROGRAMMING SKILLS REQUIRED)

When using a popup window, the editor also gives you the ability to make your link behave in various ways by using the listed Javascript event handlers. To use this area of the Insert/Edit Link dialogue box, you must have knowledge of Javascript; otherwise leave all options in the Events tab blank.

If you are familiar with Javascript and wish to add event handlers to your popup window, simply enter the appropriate Javascript code into the text field to the right of those events or actions you want to trigger the entered code.

ADVANCED TAB - Insert/edit Hyperlink (PROGRAMMING SKILLS REQUIRED)

When using a popup window, the editor also gives you the ability to add pre-defined HTML and CSS properties to your link. The options listed in the Advanced tab fall into this category. To use this area of the Insert/Edit Link dialogue box, you must have knowledge of HTML and CSS, and some web design expertise; otherwise leave all options in the Advanced tab blank.

Once you have finished entering the desired information in all tabs, click [Insert] at the bottom left of any of the 4 tabs in the Insert/edit Link area to insert the link as you have defined it.

3.9.1.2.2. Remove a hyperlink

To remove a hyperlink previously added, simply highlight the linked text or object, and then click on the broken chain link button (the one on the right in the image below) and the link will be removed.