Free computer Tutorials
HOME Stay at Home and Learn

Web Design Tutorials
 
Computer Tutorials List

Beginners Computing
Microsoft Word
Microsoft Excel
Web Design
Cascading Style Sheets
Javascript
Visual Basic .NET
Beginners PHP

Excel 2007
Which Qualifications?

 

 

 
 

Using Image Icons with your Links

 

You can use images as navigational icons on your web page, to help your viewers get around your site. There's some resources you can download for this section of the course - a web page and some images. Download the file, unzip it, then load up the web page called NavIcons.html to see an example of what navigational icons are.

Download the resources 60kb

You can copy any of the images in the Navigation folder to your own Web Pages folder, and use them on your site, or in the tutorial that follows.

To insert a navigational link with your HTML Editor, create a new page and do the following:

  • Click anywhere in between the two BODY tags
  • From the menu bar, click Insert
  • From the drop down menu, click Link > Navigation Link
  • The Insert a Navigation Link dialogue box appears, and looks like this:

Navigation Dialogue Box

Inserting a navigation link is a two step process: setting the HTML page the people will go to when the link is clicked; setting the image that is clicked on. So:

  • Click on the first of the options on the dialogue box (actually, the order you click on doesn't matter. You can click the Navigation Image first, if you prefer)
  • The Open HTML page dialogue box appears
  • Locate the web page you want to use as a link, and click OK
  • The dialogue box will now look like this:

Set the Web Page for the link

Next, you need to select an image to use. The image will be the thing that is clicked on.

  • Click on the second option, "Set your Navigation Image"
  • The Open Image dialogue box appears
  • Locate the image you're going to use for navigation
  • Click Open
  • The Open Image dialogue box disappears, and your Insert a Navigation Link dialogue box will look like this:

set the navigation image

When you have BOTH your web page and image set, click OK. The code will be inserted onto your page, and will look like this:

<A HREF = test.html>
<IMG SRC = "pointer.jpg">
</A>

As you can see, the image code has gone in between the Anchor link code. With the image surrounded by the link, the image itself will then be the link. All you're doing is setting a picture to use as a link instead of some text. Once again, though, the HTML Editor uses Relative Referencing, so careful where you're pointing! If you get a red X instead of an image, make sure the web page and the image are in the same folder.

If you're successful, you might have an image on your page that looks like this one:

Navigational Image

Notice the blue square around the image. That's the HREF part of the code doing that, to indicate that the image is a link. What it's doing is putting a border around the image. You can remove the border by adding the BORDER attribute to the image code. Like this:

<A HREF = test.html>
<IMG SRC = "pointer.jpg" BORDER = 0>
</A>

A space is typed after the image name. You then type BORDER = and follow that by a number. The number 0 means no border. If you want a thick border, experiment with the Border number, see what happens.

The default border colour is Blue. But you can change that. Unfortunately, there's no Border Colour attribute that you can add to the Image tag. To change the colour of the border, you have to remember that it is the Anchor link that is putting the border around your image. So the thing to change is the Link Colour of the Anchor tag.

You set the colour of links with the LINK tag. There are three of them, and they usually go in the BODY tag. Here's the three LINK tags:

LINK Set the colour of a link before it has been
clicked on

ALINK Set the colour of a link when the link is
clicked on

VLINK Set the colour of a link after it has been
clicked on

You can put all three in the BODY tag. Like this:

<BODY LINK =Blue ALINK =Red VLINK =Red>

Here, we're setting all links that have not been clicked on to blue. When a user clicks on a link, and after the link has been click, the colour will be red.

However, setting link colours often has mixed results. That's because the user can manipulate the browser settings to override the colours you specify.

Some text can be added along side your navigation icon, for those who have images turned off in their browsers. Like this:

<A HREF = test.html>
<IMG SRC = "pointer.jpg" BORDER = 0>Click here for page two
</A>

The end product might be a web page that looks like this one:

Nav IconClick here for page two

Experiment with the navigation images you downloaded. Use navigation icons sparingly, though: too many and you not only irritate your visitors, but the entire page will take an eternity to download over a 56k modem.

 

In the next section, we'll take a look at Image Maps.

 

<-- Back One Page Move on to the Next Part -->

<--Back to the Web Design Contents Page

View all our Home Study Computer Courses