Basics of web page linking
Introduction
Most of the advice on this page assumes you are using Macromedia Dreamweaver. This is the current industry standard graphical web page layout development tool, and it writes pretty good html for you. If you aren't already using it, you should consider switching.
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 certail 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
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 defalut 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
You can link to named anchor points (eg "#paragraph2") in a web page ...
http://www.mysite.com/article.htm#paragraph2
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 to learn more.
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 recpient.
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">
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 defalut 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.
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.
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
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
Related downloads
None at present
