Skip to main content

How can I use an image as a link?

You may wish to use an image (such as a logo) as a link on your page.

To use an image as a link, browse to the page where you want to add the link.

Click the Edit link and then click on Edit centre content or Edit right content.

In the content editor place the cursor where you would like to insert the image and click on the Image picker buttonImage picker button.

The Image picker window will load with a tree-view of your site:

Image picker window

Depending on where the image is located, click on the 'This website' or the 'Your computer' tab and browse to the image location.

Select the image you want to use and type a brief description of the page or site that you want to link to in the 'Image description' text box (eg. "Humanities Research Centre home page").

Click on the Insert button.

Please see the following FAQ for more information: How do I add images to my page?

The type of link you should use depends on whether you are linking to another SiteBuilder page or an external website. See the following FAQ for more information: What are the different types of links and how should I use them?.

Linking to another SiteBuilder page

If you are linking to a page within your own website or to another SiteBuilder site, then you should use a relative path. Select (highlight) the image and click on the Links picker icon Links picker icon.

A new window will open showing all the pages and files on your website.

Links picker screen

Browse through the list and click on the page or file that you would like to link to. Type a brief description of the page or site that you are linking to in the 'Link tooltip' text box (eg. "Humanities Research Centre home page").

Click on the Insert button .

Linking to an external website

If you are linking to an external site then you should use an absolute path (eg. to the Higher Education Funding Council's website, you would use the following path: http://www.hefce.ac.uk).

Select (highlight) the image and click on the Insert Hyperlink icon Insert hyperlink button.

The following dialogue box will appear:

Insert hyperlink screen

Type or copy in the web address of the page that you want to link to into the 'Link URL' text box. Type a brief description of the page or site that you are linking to in the 'Title' text box (eg. "HEFCE website").

Click on the Insert button.

Click Publish and Done.

The image should now work as a link. Try clicking it to make sure!

Note: When you hover over an image which is a link, Internet Explorer will display the image description whereas Firefox will display the link tooltip or title. To maximise browser compatibility, we recommend that you enter a brief description of the target page as both the image description and link tooltip/title, to inform users in advance what will happen when they click on the image. This is the text that blind and visually impaired users with speech reading technology will hear when accessing the page, so make sure that the text conveys the purpose of the image as a link (eg. if using a logo to link to an external website, do not use the description 'logo', instead describe it as 'HEFCE website'). For more information please see the W3C WAI guidelines.

Related FAQs:

Support

Telephone 73737
Email webteam at warwick dot ac dot uk
How to report a problem