HyperGraphics

Extend the versatility of your Mosaic documents by having pictures act as hyperlinks.

Objectives

After this lesson you will be able to:

Insert a graphic button in your WWW Page that links to another HTML document.
Use a small graphic to act as a "postage stamp" button to display a larger copy of the graphic.

Lesson

Note: If you do not have the working documents from the previous lessons, download a copy now.

A HyperLink Button

From the previous lesson, you have (hopefully) become comfortable with creating hypertext, text within your documents that connects a reader to related information. You can also use inline images (see Lesson 7a) to act in a "hyper" manner. If you recall, in an earlier lesson we linked some text in our Volcanoes! page, Volc.html, to a second page, msh.html, that described Mount St. Helens. Now in the latter page, we want to add a button that when clicked will link a reader back to the main lesson page.

The way doing to do this to put the HTML tags for inline images within the hypertext part of the anchor tag:

   <a href="fileX.html"> <img src="graphic.gif">
   Go to Document X</a>

In your WWW page, this HTML code will display a graphic and the text Go to Document X both which act as hyperlinks; clicking on either the text or the graphic will tell your WWW browser to go to the HTML file fileX.html. Note that the graphic alone could be a hyperlink. In the World Wide Web, a "HyperGraphic" is surrounded by a dark blue box so you know that it is "active".

Now we will create a button. First, you need to get a copy of this arrow button (img src=left.gif">. If you need assistance on saving graphics files, see the reference page on downloading. When you are ready, view and save the arrow GIF file.

You should now have a copy of the file somewhere on your computer. Next, add the HTML code to make the button work:

Open the second HTML file, msh.html in your text editor.
At the bottom, modify the last line to:
```
<hr>
<a href="volc.html"> <img src="arrow.gif"> 
Return to <i>Volcanoes!</i></a>
```
Note: The inline image tag (<img...>) is completely within the anchor between the > that marks the end of the URL and the </a> that marks the end of the hyperText. Also note how the <i> tag is used within the active hypertext to emphasize the title of the lesson. And finally, we have used the <hr> tag to put a hard rule or a line above the button graphic (see lesson 4).
Save the HTML file
Return to your WWW browser, and select Open Local from the File menu to read in the "msh.html" file.
Select Reload from the File menu to update the changes
Test the hyperlink to the Mount St. Helens page and the new button that should return you to the Volcanoes! page.

"Postage Stamp" Images

Previously, we advised against using large "in line" graphics on your WWW pages because readers may have to wait a long time for images to download to their computer. One way around this is to create minature size copies of the graphic, or "postage stamps" which are displayed as inline graphics. Then, using the same steps as above, you can make the "postage stamp" image act as a hyperlink that points to the full size image. In this way, the large images are downloaded only if the reader decides to view it.

We will now add a postage stamp image that links to a larger picture: If you would like, first preview the postage stamp GIF image and the Full size JPEG image.

First, you need to get a copy of two GIF files. If you need assistance on saving graphics files, see the reference page on downloading. When you are ready, save the postage stamp GIF image as a file called "stamp.gif" and the Full size JPEG image as a file called seisom.jpg

Next, create the postage stamp link in your main text file:

Open the Volc.html file in your text editor

Under the heading "Long Valley" enter the following:

  This field seismometer measures earthquakes associated 
  with subsurface volcanic forces and may help to predict 
  future events. It sits on a plateau known as the "Volcanic 
  Tableland" formed by a major eruption  600,000 years ago.
  <p>
  <a href="seismo.jpg"> <img src="stamp.gif">
  -- Click to view full size image -- </a>
  <p>
  This seismometer measures earthquakes 
  associated with subsurface volcanic forces.

Note: The inline image, stamp.gif acts as a hyperLink to a larger image, seismo.jpg. When a user clicks on the "postage stamp" or the text "Click to view full size image --", your WWW browser will display the larger image in an external window.

Save and Reload in your WWW browser.

Check Your Work

Compare your WWW document with a sample of how this document should appear. If your WWW document was different than the sample, review the text you entered in the text editor.

Review

Review topics for this lesson:

How did you create the graphic button in your WWW page?
How are "postage stamp" links useful in including graphics in your WWW document?
How did you create your "postage stamp" link in your document?

Independent Practice

Try to add a button that links two WWW documents to each other.

Coming Next....

Use the preformat tag to create a table of text in your Volcano lesson.

| Lesson Index | previous lesson "Named Anchors" | next lesson "Preformatted Text" |

Writing HTML >Lesson 8d: HyperGraphics

The Internet Connection at MCLI is Alan Levine--}
Comments to levine@maricopa.edu