HTML Basics:
Icon: FrontPage Express Image Link

Title: Jan's Illustrated Computer Literacy 101
españolIcon: Change web
Did you want IE9+, Chrome, Firefox; Notepad? Icon: Change web

So far you have created:

  • a text link to a page in another web site

  • a text link to another page at the same site

  • an email link

Next you will learn to create:

  • an image link

  • a link that opens an image separately

Clickable Images

HomeWhen, at last, browsers were created that could show images, an image that was a link had a border with the same color as text links. Not always a pleasing combination!

Good design for your page should make it clear what to click, without having to resort to borders.

There are no rules about which images should be clickable and which not. But some common expectations are developing from the ways major web sites do things.

For example, a corporate or site logo in the upper left or right of a page should be a link back to the site home page. A left pointing arrow should lead to the previous page in a sequence of pages. A right pointing arrow, similarly, should lead to the next page in the sequence. An upward arrow should take you to the top of the page.

As the world of the Web continues to grow and develop, we will gradually settle on how we expect web pages to behave. Until then, we are all still experimenting to find out what works... and what doesn't!

Where you are:
JegsWorks > Lessons > Web

Before you start...

Project 1: Browser BasicsTo subtopics

Project 2: HTML Basics
    HTML CodeTo subtopics
    About HTML
    What You Need
    Code by HandTo subtopics
    FrontPage/ FPXTo subtopics
    Images in HTML Arrow - Subtopic open
    FrontPageTo subtopics OR Icon: FPXFPX Arrow - Subtopic open
            icon-footprintInsert Image
            icon-footprintMore Images
            icon-footprintInline Images
            icon-footprintReplace Image
            icon-footprintImage Link
                Align & Space
            icon-footprintAlign Images
                Image Issues
            icon-footprintSave to New Location
            icon-footprintSave Non-Web Image
    FormattingTo subtopics
    TablesTo subtopics
    ConvertTo subtopics
    ExercisesTo subtopics


Icon Step-by-Step

Step-by-Step: Image Link in FPX

 Icon Step-by-Step

What you will learn: to create an image link
to create a link to an image

 Start withClass disk, Icon: FPX hector10.htm, resource files

Image Link

You will turn the picture of the pyramids into a link to the same site as the text link.

  1. Class disk Save the page as  hector11.htm  to the web folder on the Class disk.
  2. Click on Pyramidsthe pyramids image to select it.
  3. Pyramids in EgyptClick on Button: Hyperlink the Hyperlink button. The Create Hyperlink dialog appears. If necessary, change the Hyperlink Type to  http: 
  4. In the text box URL type  and click on OK.
  5. Move your mouse pointer over the image and check the Status bar. It should show the URL that you typed.

    In FPX this is the only way to tell if an image is a link when there is no border around the image. In a browser the pointer will normally change to Pointer: hand shape the hand shape when over an image link.

  6. Class disk Save [ hector11.htm]

Verify Link

  1. Move your mouse pointer over the pyramids picture.
  2. IE window shows the site http://touregypt.netHold down the CTRL key and click. FrontPage Express loads the linked page, if you are connected to the Internet.
    The page does not look too good in FPX! At least you know your link works.

Link to an Image

It is friendlier to let your viewers choose whether to view a large image or not. You can create a text link or a small thumbnail image that opens a larger version of the picture. You can also do both at once!

Advantage of linking directly to an image:

  • Viewer's Choice -  those who have fast connections or who are willing to wait can choose to view large images. Others don't have to wait on the image to download.

Disadvantages of linking directly to an image:

  • There are no explanations or captions on the page because there is no page here. It's just the bare image!
  • You must use the browser Back button to return to page you just left.

  1. Text: image and text highlighted - "the Great Wall of China"Drag across the small image and the words "the Great Wall of China". The image and text invert their colors to show that they are selected. The image really looks like modern art now!
  2. Dialog: Edit Hyperlink | World Wide Web - china.jpgClick on Button: Hyperlink the Hyperlink button.
  3. Select type (other) and type the name of the large version of the image: china.jpg

    Since this file is in the same folder as the htm file, you do not have type a path.

    Text: image and textlink highlighted - "the Great Wall of China"

  4. Click on OK. The selected words are now a link, but they are still highlighted.
  5. Text: image and textlink - not selected- "the Great Wall of China"Click somewhere on the page to remove the highlighting. The text link is in blue and underlined (the default formatting for unvisited hyperlinks).
  6. Class disk Save [hector11.htm]

Verify Link

  1. Move your mouse pointer over the new link "the Great Wall of China" and check the Status bar. It should show china.jpg
  2. Error Message: Could not load A:\my docs\web\china.jpgRight click on the link and from the popup menu select  Follow hyperlink . An error message appears.

    FPX cannot open the file, even though it is there! Annoying!

  3. Click on OK to close the dialog.
  4. IE window: hector11.htmOpen the page hector11.htm in your browser.
    (You can type the path in the Address box:
     a:\my docs\web\hector11.htm )

  5. IE window: china.jpgTest your link to the image of the Great Wall of China by clicking it. Finally, verified!
  6. Return to hector11.htm by clicking the Back button, or by pressing ALT + left arrow.
  7. Close IE.