Images as links: icons

Getting some icons
Inserting the icon
Making the link

Getting some icons

Copyright does exist in images and text on the Web, but there are many sources of copyright free clipart on the web. Below are a few of the ones I have used. The pages below have a large graphics content which means a longish download time.

The icon bazaar - with categories of icon, and a bad example of interface design!
Pardon my icons by Jerry Zeldman. Pun intended, these pages contain 32 pixel square images of famous actors and cartoon characters. Some of the images are a bit odd.

If you have a copy of CorelDRAW or MS PhotoDraw, you will have a large collection of clip art available. These can be saved as GIF or JPEG files and used on Intranet pages and probably on public Web pages as well. This 'reading' icon was created from a CorelDRAW 'symbol' and a filled rectangle and then exported as a GIF. The icon could link to a page of suggested readings.

When choosing icons:

Try to make the icon symbolic of the action or information the link is leading to. A picture of a house may be cliché, but it does help people get back to your 'home page'
Icons should make things easier, not be for decoration
Keep your icons small - 32 pixels is 'standard' for the windows desktop, anything bigger than 48 pixels becomes large.
Try to get icons which are all the same size: this makes swapping images easier
Avoid animated icons unless you really want them. Any moving thing on the page will distract people from your words, and the animated GIF has to reload from the server each cycle, wasting bandwidth
Use the same icon for the same action always!

These notes contain very little 'page furniture', most of the images are for explaining actions and showing examples. These pages are also designed to be changed quickly in response to your views.

Keeping track of large collections of images can be a chore, especially if you are not consistent in naming the images. Painting programs like Paint Shop Pro and CorelPHOTO-PAINT! have 'thumbnail' or 'image browsing' facilities, so you can see small copies of your pictures.

Inserting the icon

Inserting an icon is just the same as inserting an inline image. Assuming your icon image file is in the same folder as your Web pages, and the Web page is open in MS FrontPage Express:

Place the text insertion point or cursor in the part of the page you want your icon to appear
Click on the to bring up the Image dialog box
Click the button to see the Image open dialog box
Navigate to the folder with your Web pages and find the file name for your icon
Select the file name, and click the button to insert the icon in your page
The icon should now appear in your Page
Double click on the icon to bring up the Image Properties dialog box
Ensure that the tab is uppermost
Add some Text in the Alternative Representations section of the dialog box
Change to the tab and select the alignment which is best.

Adding some Alternative Text is especially useful for readers with MS Internet Explorer versions 3 upwards, and Netscape Navigator version 4 upwards. In these browsers, the Alternative Text will appear in a 'tooltip' type yellow box if you hold your mouse over the image for a few seconds. The text should indicate that the image is a link.

Making the external link

Making an icon into a link is very simple. Assuming you have the Web page loaded into MS FrontPage Express, and that the image file is in the same folder as the Web pages, you just:

Select the image by clicking on it once - the image should then have 'handles' around it to show that it is selected
Click on the button on the MS FrontPage Express to bring up the Create Hyperlink dialog box
Select the tab and type in the URL of your destination page in the URL: section
Click OK to accept the link and remove the dialog box

Your image will now act as a link to the external Web site. To check that the link is working:

Load your page into a Web browser
Hold the mouse button over the icon - the pointer should change into the familiar 'finger' symbol to show a hyperlink
Go online and test your link

HTML tags

Note that the HTML tags inserted by MF FrontPage Express add an extra attribute into the Image tag. This attribute sets the border around the image to zero, so you don't get the blue solid border you sometimes see on images which act as links. Netscape Composer requires you to set the border equal to zero yourself. The full set of tags for making an icon into a hyperlink are analysed below:

<a href="http://www.jasc.com"> The opening link tag, with the URL of the site.

<img src="icon.gif" The first part of the IMG tag, with the name of the image file.

alt="link to JASC" The 'alternative text' for the image.

border="0" The attribute which removes the border from the icon

width="35" height="34"> Size information which allows the browser to load the page quickly

</a> The closing tag for the link.

This pair of tags contains no visible text at all. The IMG tag acts as the 'link text' for the link tag.