FrontPage Resources AccessFP Services AccessFP Mall Web Resources
Index About Advanced Search Home

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.

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 read.gif (333 bytes)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:

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:

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:

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

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.