Created by David Powers
Smart Link converts an existing link so that the target page opens in a new browser window. It works in a similar way to the Dreamweaver Open Browser Window behavior, or using target="_blank", but gives you far more control over its look and position. Although it uses JavaScript, it is smart enough to work even if JavaScript is disabled (by opening the page in the same window) — keeping your site accessible to everyone, and far more user-friendly than a link that doesn't work at all. It also has the advantage of keeping your pages valid, unlike target="_blank" which has been deprecated by the W3C.
An important feature offers the option of setting a different target page for browsers that have JavaScript disabled. No elaborate "sniffer" scripts are needed. Smart Link knows automatically which page to serve up to the visitor. By setting the various options in the Smart Link user interface, you can choose the size and position of the new window, as well as other features such as scrollbars, toolbar, etc. By giving the new window a default name (which you can change or remove), Smart Link offers a choice of whether all links open in just one new window or different ones; and it always ensures the new window opens on top. (Note: these features will only apply if JavaScript is enabled.)
At the same time, you can add a title to your link, which will display as a tooltip in version 5 browsers and above when a visitor mouses over the link.
Smart Link inspects your page to see if there are any other Smart Links already set, and offers you the same settings as the first one it finds, which you can either accept or change to suit your own needs.
What's more. It validates as HTML 4.01 Strict and XHTML 1.0 Strict.
Pretty smart...
Create a link to another page (either within your own site or to another one) in the normal way. Make sure this is a link to a real file — Smart Link cannot be applied to a void JavaScript link (one that shows "javascript:;" in the Properties inspector).
Place your cursor inside the link. Open the Behaviors panel (Shift + F3). Click on the + button, and choose CB Tools > Smart Link from the menu that appears.
Fill in the appropriate details in the dialog box, and click OK. That's it.
Set this to Yes if you want to set an alternative target page to send visitors to when they visit your site with a browser that either does not understand JavaScript or has JavaScript disabled. If set to No (the default), the Alternative (No-JS) text box will automatically be blanked out.
This box is automatically filled with the address of the page you want to link to. If you want to change it, type the new address into the text box, or use the Browse button to locate a new page within the current site.
You will be unable to enter anything into this text box unless you select Yes for Different Target if JavaScript is Disabled. Either type in the alternative address or use the Browse button to locate a new page within the current site.
Important note: setting this alternative page may cause difficulties for disabled people using assistive technology, as it may be interpreted as the default destination. If your page needs to comply with accessibility guidelines such as Section 508, test the page thoroughly with the appropriate technology beforehand, or provide an alternative link. There are no known accessibility problems with using the main target option on its own.
If setting an alternative page, you should also set an appropriate message to appear in the status bar for JavaScript-enabled browsers. This is because when a visitor mouses over the link, the status bar will display the URL for the alternative page. To change the status bar, highlight the link, click on the + button on the Behaviors panel, and select Set Text > Set Text of Status Bar.
This should contain only alphanumeric characters (a-z, A-Z or 0-9) or the underscore (_). Do not include any spaces or punctuation.
The Window Name does not appear anywhere in the browser, but is used in the background to decide where to display the page being opened. If all Smart Links use the same Window Name, each page will be loaded into the same window, avoiding the annoying habit that target="_blank" has of opening a new window every time. If you want your links to open in more than one new window, simply choose another name, or just leave the Window Name field blank.
This represents the overall width and height of the new window (in pixels), including any features, such as toolbars, scrollbars, etc. The default has been set to 600 x 400, to prevent the new window completely obscuring what's already on the visitor's screen. To change, type in a new number or leave the field blank. If no size is specified, the browser will open at whatever the default size is on the visitor's computer.
For security reasons, JavaScript does not allow scripts to open windows less than 100 pixels on a side or larger than the computer screen. There is no upper limit to the number you can enter in the width and height fields, but you should realize the window will never be larger than the available screen size. If you enter a number smaller than 100, Smart Link automatically treats it as if no number has been entered at all, so the window will open at the visitor's default size.
Check the appropriate radio button. Smart Link needs the Width and Height of the new window to be able to calculate how to center it in the visitor's screen. Smart Link takes into account any features, such as toolbars, you have added. Differences between various makes of browser mean that vertical centering is only approximate. Opera, for example, calculates the position of a new window not from the top of the screen, but from the lower edge of the browser's toolbar. Smart Link automatically adjusts the centering if Opera correctly identifies itself, but if Opera is set to identify itself as Internet Explorer (the default), the new window will open much lower down the screen.
These fields have been left blank by default, but enable you to set where the new window opens, as measured in pixels from the top left-hand corner of the visitor's computer screen. For instance, entering 0 in both fields will place the new window neatly in the top left-hand corner. (Note: this normally refers to the whole screen, not the current browser window, although Opera calculates the position from the bottom of its toolbar.) Numbers must be positive.
If checked, this will display the browser toolbar with Back and Forward buttons in the new window.
If checked, this will display the menu bar with File, Edit and other options in the new window.
If checked, this will display the location field for visitors to type a new URL directly into the new window.
If you uncheck this option, no scrollbars will be displayed in the new window, even if the content is too big to display. Test carefully in various browsers before removing this option.
If checked, this will display the status line at the bottom of the new browser window. The status line shows URLs or custom messages whenever the visitor mouses over various elements in the page.
If unchecked, the visitor will not be able to resize the new window, even if the content is too big to fit. Test carefully before removing this option.
These two buttons offer a quick way of selecting or deselecting all features. If you want to set four or five, it's faster to select all, then deselect any you don't want.
Text entered here will be displayed as a tooltip in version 5 browsers and above whenever the link is moused over. Any text can be entered, but double quotes will be automatically converted to single quotes, to ensure correct functioning and display.
If the link already has a title, the field will be filled in automatically. To remove a title, simply delete everything in the field and click OK. If you decide to remove the Smart Link by clicking on the - button in the Behaviors panel, the title will not be removed. This gives you the option of preserving the tooltip.
Clicking on this button will clear all fields in the dialog box. No changes will be made to the Smart Link itself until you click the OK button.
Important note: clearing all values in the dialog box will not remove Smart Link. Instead, it simply sets all options to the default on the visitor's browser. This is the simplest way to set Smart Link to work exactly the same way as target="_blank", although you will need to reset the Target page before clicking OK. To remove Smart Link completely, follow the instructions in the next section.
Place your cursor inside the link (in either Design or Code View). Open the Behaviors panel (Shift + F3). Highlight Smart Link and click on the - button. If there are no other Smart Links on the page, Dreamweaver will remove the Smart Link JavaScript function from the head of the document, unless you have placed it in an external file.
Removing Smart Link does not remove the title from the <a> tag. If you no longer require it, either remove it manually, or ensure it's been deleted from Smart Link as described in the section called Title above.
Smart Link uses a JavaScript shortcut (this.href) to read the existing link within the <a> tag. If, for any reason, it cannot find a valid href within the link, it will fail to operate.
Smart Link can only be applied to an existing link, or to an image surrounded by a link. It cannot be applied to links that use a void JavaScript link (ones that display "javascript:;" in the Properties inspector). Smart Link is, however, compatible with other JavaScript behaviors, such as Set Text of Status Bar, applied to the same link.
Smart Link can be safely applied to an image that is being used as a link. However, to ensure the link works in all browsers, make sure to change the event in the Behaviors panel from "onClick" to "(onClick)". By selecting the event in parentheses, Dreamweaver will apply the action to the surrounding <a> tag, ensuring the browser can correctly interpret the reference to this.href. Alternatively, select the <a> tag first before applying Smart Link.
In MX 2004 & Dreamweaver 8, (onClick) has been replaced by <A> onClick. It works exactly the same way, and the underlying code created by both Dreamweaver and SmartLink is identical.
FlashBang! by Joseph Lowery and Eduardo Zubler will allow you to apply Smart Link, but cannot interpret the reference to this.href. If using FlashBang! use the built-in "target" option rather than Smart Link.
© Copyright 2003, David Powers
Visit foundationphp.com for details of Dreamweaver and PHP books and tutorials by David Powers.