HTML Basics:
Icon: FrontPage 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 several kinds of links:

  • 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.

What viewers tend to expect

Image: Expected to link to:
a corporate or site logo, especially in the upper left or right of a page site home page.
Arrow - leftleft pointing arrow previous page in a sequence of pages
Arrow - rightright pointing arrow the next page in the sequence
Arrow - upupward arrow to the top of the current 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
    WYSIWYG
    FrontPage/FPXTo subtopics
    Images in HTML Arrow - Subtopic open
    Icon: FrontPage FrontPage Arrow - Subtopic open OR FPXTo subtopics
    icon-footprintInsert Image
    icon-footprintMore Images
    icon-footprintInline Images
    icon-footprintReplace Image
    icon-footprintImage Link
        Align & Space
    icon-footprintAlign Images
        Image Issues
    icon-footprintSave Page
    icon-footprintEdit/Convert Image
    icon-footprintPictures Bar
    icon-footprintPublish Web
    FormattingTo subtopics
    TablesTo subtopics
    Print
    ConvertTo subtopics
    Summary
    Quiz
    ExercisesTo subtopics


Search 
Glossary
  
Appendix



Icon Step-by-Step

Step-by-Step: Image Link in FrontPage

 Icon Step-by-Step

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

 Start withClass disk, 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.

TipA small underscore mark beside the image Image hyperlink with underscore showing at the right means that the image is a link and you caught the next blank space in the the link.

  1. Class disk Save the page as  hector11.htm  to the web folder on the Class disk.
     
  2. Click on Pyramids the pyramids image to select it.
     
  3. Click on Button: Hyperlink the Hyperlink button. The Create Hyperlink dialog appears.
     
  4. In the text box URL type  http://touregypt.net  and click on OK.

    Pyramids in Egypt

    TipWhen you type a URL or path that Windows has already seen, the textbox will offer to complete it for you. This can save a lot of typing errors... if it was right the first time!
     

  5. Move your mouse pointer over the image and check the Status bar. It should show the URL that you typed.

    When there is no border around the image in Normal view, the Status bar is a quick way to tell if an image is a link. In a browser the pointer will normally change to  the hand shape Pointer: hand shape when over an image link.
     

  6. Class disk Save [ hector11.htm]

Verify Link: Normal View - CTRL + click

This method actually loads the target page for editing. You won't be able to save any changes however. You would need the username and password for that account.

  1. Icon: Connected to the InternetBe sure you are connected to the Internet.
     
  2. In Normal view, move your mouse pointer over the pyramids picture.
     
  3. FrontPage document pane shows the site http://touregypt.net in Normal viewHold down the CTRL key and click. FrontPage loads the linked page for editing, if you are connected to the Internet.
     
    It may take a while to finish loading. The Status bar in FrontPage will show Status bar: Retrieving http://touregypt.net
     
    The icon Icon: Unloaded image marks images that have not yet been downloaded.
     
    The icon Icon: Link to picture is broken marks images where the attempt to download failed. The path is wrong or the server is down or too busy to respond in the allotted time.
     
  4. Close the page about Egypt by clicking Button: Close the small close button at the upper right of the document pane. Be sure which page you are closing!


 


Link to an Image

If you have an image that needs to be rather large, it is friendlier to let your viewers choose whether to view it 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: Insert Hyperlink | china.jpgClick on Button: Hyperlink the Hyperlink button.
     
  3. Type the name of the large version of the image in the Address textbox: 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

Normal view- Menu:

  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. Right click on the link and from the popup menu select  Follow hyperlink . The image opens in whatever program is associated with jpg files for editing. This is usually a graphics program.
     
  3. If another program opened, close it and switch back to FrontPage.

Preview - Mouse:

  1. Switch to Preview in FrontPage and click on "the Great Wall of China". This time the large image shows in the Preview window, just like it will in a browser.

    The Normal and HTML views will still be of hector11.htm. If you want to return to the Preview of hector11.htm, right click on the page and choose  Back  from the popup menu.

Browser - Mouse:

  1. 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 )

     
  2. IE window: china.jpgTest your link to the image of the Great Wall of China by clicking it. Verified!
     
  3. Return to hector11.htm by clicking the Back button, or by pressing ALT + left arrow.
     
  4. Close IE.


 


FrontPage Hyperlinks Report:

Now that you have a web to work in, you can put FrontPage to work doing it's extra features. One of the most useful is the Hyperlinks report, which verifies all your hyperlinks and links to images. The Hyperlinks report looks at all hyperlinks and images in all pages in the web, not just the one that is open.

  1. Icon: Connected to the InternetBe sure you are connected to the Internet.

  2. Click on Button: Reports the Reports button in the Views bar at the left of the FrontPage window. The Document pane and the Folder List are replaced with the Reports view. You will see a simple message while FrontPage does its thing with the web on your floppy disk. Site Summary

    This will take longer for a server-based web or one on a floppy disk than for a web on your hard disk.

    Toolbar: Reporting - Reports button expandedTipThe Reporting toolbar appeared. Once you click on a report link in the Site Summary, you can use the Reports drop list to switch to a different report.

     

  3. Reports: Site SummaryWhen the Site Summary appears, click on the link to the Hyperlinks report.

    A dialog will ask if you want to verify all the links.
    Click
    Yes.

    Dialog: Verify Hyperlinks

    It can take several minutes to verify all the links since some are on the Internet.
     

  4. Scroll the list of hyperlinks to the links to the Egypt site. These should be all OK.
      Verified links to http://touregypt.net/

     The list of links will include a number of broken links. Not to worry at this point!
     
    TipThe third column shows what document the link is in. To the right of this column are the columns Title and Modified By
     

  5. Check the Status bar message.  Statusbar: Message = 14 broken internal hyperlinks, 2 broken external hyperlinks
    Internal links are links to files inside the web.
    External links
    are to files not in the web.