Steegle logo

Making an image a link - classic Google Sites

Many classic Google Sites users want to know how to make an image a link in classic Google Sites. Learn how to remove and edit the link on an image with these instructions.

For new Google Sites see these instructions: Making an image a link - new Google Sites

Instructions

Remove Default Automatic Link to Image

  1. When you add an image to the page Google Sites automatically makes the image a link to the image itself, so select (or click) the image

  2. You will see the Image Option dialogue box appear (it contains both the link information, alignment, size and wrap options): use the upper Remove link - this removes the automatically added link to the image itself.

Make an Image a Link

  1. Use the Insert menu and Image to add your image to the page

  2. Select (or click) the image and you will see the Image Option dialogue box appear: use the Change link

  3. Either choose the page you wish to link to or go to the Web address tab and add the URL you want to link to

  4. Use the OK button and your image will now link to the page or web address you chose.

Remove a Link from an Image

  1. Select (or click) the image and you will see the Image Option dialogue box appear (it contains both the link information, alignment, size and wrap options)

  2. Use the upper Remove link and the image will no longer link to anything.

If you want to make an image already on the page a link the easiest way to do this is to remove the image and re-insert it, so you can follow the steps above in Make an Image a Link.

Code Instructions

Only use these instructions if you want to hand code the link in HTML

  1. Use the Insert menu and Image to add your image to the page

  2. Once added to the page Google Sites automatically makes the image a link to the image itself, so you need to alter this link to point to the website you want: to do this you need to use the HTML button to edit the HTML around the image.

  3. Once in the HTML find the

  4. <a href="..."> </a>

    1. around the image and change the contents of the

    2. href="..."

    3. to the web address you want.

  5. If you want to add an alternative text tag to your image, so if the image does not load or someone with visual impairments using a screen reader can sill get the information the images conveys add

    1. alt="Alternative Text"

    2. to inside the

    3. <img >

    4. tag.

    5. Note: do not try to describe the image, but what it's there for, e.g. if it's a link to Google Sites then make the alternative text "Google Sites".

  6. If you want to give more information of where the image link will take you then add a title attribute to the link: to do this add

    1. title="descriptive text"

    2. to the

    3. <a href="...">

  7. If you want the link to open in a new window then add a target attribute to the link: to do this add

  8. target="_blank"

    1. to the

    2. <a href="...">

See the examples on the right to see specifically how it's done done.

Option Boxes

Image Option Box

Image Options Box in classic Google Sites

Code Examples

Inserted Image

HTML code for it is:

<a href="http://www.google.com/a/help/intl/en/images/sites_35.gif" imageanchor="1"><img src="http://www.google.com/a/help/intl/en/images/sites_35.gif" border="0"></a>

Change the

<a href="http://www.google.com/a/help/intl/en/images/sites_35.gif" imageanchor="1">

to

<a href="http://sites.google.com">

Linked Image with Title

To add the title to the link and alternative text to the image you should produce something like:

<a href="http://sites.google.com" title="Google Sites - free websites and wikis"><img src="http://www.google.com/a/help/intl/en/images/sites_35.gif" border="0" alt="Google Sites"></a>

Just the image, no link

To remove the link from the image you should remove the highlighted code:

<a href="http://www.google.com/a/help/intl/en/images/sites_35.gif" imageanchor="1"><img src="http://www.google.com/a/help/intl/en/images/sites_35.gif" border="0"></a>

So you're left with:

<img src="http://www.google.com/a/help/intl/en/images/sites_35.gif" border="0">

Learn about Steegle Products

Springboard Intranet
for Google Workspace

We provide a well-designed and well-structured intranet to enable your employees to: start work with the right tools; find people with appropriate skills; collaborate with the their teams; access authorized resources; thank and recognize heroic colleagues and coworkers.

Steegle Springboard Intranet for Google Workspace

Steegle People for Google Workspace Logo

Steegle People
for Google Workspace

Searchable staff directory for Google Workspace, with real-time search results, that automatically generates org charts to show your organisation structure - Steegle People.

Steegle People

Steegle Share for Google Drive Logo

Steegle Share
for Google Drive

If the standard Google Drive Folder embed does not give you everything you need, take a look at the Steegle Share for Google Drive that offers search, sorting, download links and more...

Steegle Share

Steegle News Gadget for Google Sites Logo

Steegle News
for Google Sites

Display headlines, snippets and metadata linked to your news articles and blog pages on your Google Site and filter by tags added to the news gadget. See the Steegle News Gadget.

Steegle News

Steegle Heroes
for Google Workspace

Employee recognition system: Steegle Heroes allows you to thank and recognise your colleagues, coworkers and employees spotlight a hero as an Employee of the month.

Steegle Heroes

Feedback

Please let us know if this article helped or if you know of any improvements.

Keep up-to-date

Join the Sites Update Group on the Google Sites Classic Comparison to get email notifications about New Google Sites updates.

Newsletter

Subscribe to our newsletter for emails about all things Steegle