Basics of web page linking by Matt Ottewill

Hyperlinks

A hyperlink is a device that allows you to navigate from one web page to another. This device might be ...

• Some text
• An image or part of an image
• A frame in a Flash movie
• An event initiated by moving the mouse to certain screen position
• A drop down menu
• etc

Mouse events

Computers use "mouse system events". Different programming languages use different terms for these but here are the most common ones ...

• Mouse enter ... when the mouse rolls into an object
• Mouse leave ... when the mouse rolls off an object
• Mouse over (hover / rollover / within) ... when the mouse is over an object
• Mouse down (click / clickOn) ... when the mouse clicks on an object
• Mouse up ... when the mouse is released

And here are some more esoteric ones ...

• Mouse still down ... when the mouse is held down
• Mouse up outside ... when the mouse is clicked on an object, moved off it and then released

Hyperlink states

When creating a multi-state web link the related mouse events are ...

• link = no mouse event
• hover = mouse rollover
• active = mouse down
• visited = no mouse event (link just changes colour to indicate this link has been clicked before)

Absolute & relative links

This important concept is explained here. If you don't know what it is, read this article before continuing with this page.

Linking from text

Open in same window

This is the simplest type of link.

1 Select the text that you want to become a link.
2 In the properties palette type, or paste (or browse for another page within your local site) the URL you want to link to into the "Link" box.
3 Set the Target to "_top" (same window) . By default the target will be set to "_top" even if it is blank.

Open in new window

1 Select the text that you want to become a link.
2 In the properties palette type, or paste (or browse for another page within your local site) the URL you want to link to into the "Link" box.
3 Set the Target to "_blank" (new window).

Open in new window with defined attributes

This method uses a simple JavaScript behaviour to give you access to more options.

1 Select the text that you want to become a link.
2 In the properties palette type "#" into the "Link" box and then select it.

3 In the Behaviours palette click on the "+" button and select "Open Browser Window". A window will open where you can input options the click "OK".
4 Check in the Behaviours palette that "On Click" is shown.

Other useful linking tips

Anchor points within a page

You can link to specific vertical locations within a web page by inserting a named anchor (eg "#paragraph3") and linking to it ...

http://www.mysite.com/article.htm#paragraph3

If you have a very long page and want to create a link that takes you back to the top you can insert the link without the named anchor being present. The default setting for a link which targets a named anchor which doesn't exist is to return to the top of the page. Just use this code ...

<p><a href="#top">Top of page</a></p>

or simply ...

<p><a href="#">Top of page</a></p>

Top

Embedded Flash, Shockwave etc links

Director, Flash, Acrobat and many other authoring programs allow you to link to web pages. You will need to read their manuals to find out how.

Click here to view lingo that will help you create web page and mailto: links in Director.

CSS links

Cascading Style Sheets allow control of how the different states of a link (hover, active, visited etc) appear. Click here for some examples.

JavaScript links

By using Behaviours in Dreamweaver, or by hand coding your own JavaScripts, or by copying scripts, you can create a variety of link types based on events (such as mouse down/up, key down/up), and control statements etc.

Close window

You can made a browser window close by attaching a simple JavaScript to a text selection or image. You will need to do this by editing the html in "code view".

Here's the code for attaching to an image file (closewindow.gif) ...

<p><img src="closewindow.gif" width="245" height="30" onClick="javascript:window.close();"></p>

Here's the code for attaching to some text ...

<p><a href="javascript:window.close();">Click here to close this window</a></p>

Mailto: "links"

A mailto link will open the default email program (on the end users computer) and create a new blank addressed email. Simply select the text or image you want to link from and enter "mailto:" followed be the full email address of the recipient.

Mailto: links from forms

You can create forms which send their user inputted contents as emails. In general you will use an action in your html code such as ...

<form method=POST action="mailto:somebody@somewhere.com">

But you can also try the following to make the text formatted more clearly ...

<form method=POST action="mailto:somebody@somewhere.com" enctype="text/plain">

Both of these above methods are not ideal however because they require the end-user to be using a computer which has an email client program configured (eg Outlook Express, Mail etc), are not secure and make the target email address visible. Click here for some advice on using forms and php to send information from a web page to an email address.

Linking from images

You can create a link that is attached to an image in several ways. You will probably want to use a GIF or JPEG.

Open in same window

1 Insert the image that you want to become a link into your page and select it.
2 In the properties palette type, or paste (or browse for another page within your local site) the URL you want to link to into the "Link" box.
3 Set the Target to "_top" (same window) . By default the target will be set to "_top" even if it is blank.

Open in new window

1 Insert the image that you want to become a link into your page and select it.
2 In the properties palette type, or paste (or browse for another page within your local site) the URL you want to link to into the "Link" box.
3 Set the Target to "_blank" (new window).

Open in new window with defined attributes

1 Insert the image that you want to become a link into your page and select it.

3 In the Behaviours palette click on the "+" button and select "Open Browser Window". A window will open where you can input options the click "OK".
4 Check in the Behaviours palette that "On Click" is shown.

Image map

1 Insert the image that you want to become a link into your page and select it.
2 In the Properties palette select a hotspot tool shape from the "Map" area and drag out the part of the image that you want to become a link on the image.

3 Using the techniques described on this page you can make the link open in the same, new or a new defined attributes page.

Rollover image CSS

This is a preferable method to JavaScript because it is faster and doesn't clutter your page with code.

Click here for examples

Rollover image JavaScript

You can create an image rollover in Dreamweaver using a JavaScript behaviour.

1. Create 2 images of the same size and save them to your sites media folder.
2. Insert you cursor at the location on the page where you want the rollover.
3. Choose Insert > Image Objects > Rollover image from the Insert menu.
4. A self explanatory dialogue box will open which will let you create your rollover and define a page to link to.

Example rollover link