8e. HyperGraphics

Text does not have a monopoly on being "hyper"... expand the versatility of your web pages by having pictures act as hyperlinks (Just try clicking the cube!).

Objectives

After this lesson you will be able to:

Insert a graphic button in your web page that links to another HTML document.
Insert a small graphic that acts as a "postage stamp" button for a link to display a larger copy of the image.

Lesson

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

A HyperLink Button

From the previous lessons, you have (hopefully) become comfortable with creating hypertext, text within your documents that connects a viewer 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 Volcano Web page, index.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 to do this is to put the HTML tags for inline images within the hypertext portion of the anchor tag:


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

In your web page, this HTML code will display an inline image and the text Go to Document X. Both will act as hyperlinks; clicking on either the text or the picture will tell your web browser to go to the HTML file fileX.html. The image alone could be a hyperlink. In the World Wide Web, a "HyperGraphic" generally is surrounded by a colored box matching the color of hypertext on your web page, so you know that it is "active".

NOTE: Many browsers now can alter the color of hypertext and some pages have suppressed the display of the outline around HyperGraphic links. Generally, you can identify a hyperlink area on a web page by looking for a change in the cursor as it passes over a "hot" region. The cursor usually changes from an arrow to a hand when it passes over an active link.

From a design standpoint, we recommend that if you use pictures to act as hyperlinks that you offer also a text link or use the ALT= attribute in the <IMG...> tag in case the viewer has turned off the loading of images.

Now we will create a "hyper" graphic button. First, you need to get a copy of an arrow button from the Lesson 8e Image Studio.

You should now have a copy of the image file somewhere on your computer (You should move it to the pictures folder/directory in your workarea).

Next, add the HTML 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="index.html#usa"> <img src="../pictures/left.gif"> 
Return to Volcano Web</a>
```
Note: The inlineimage 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  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 horizontal rule or a line above the button graphic (for more on this tag see lesson 4).
Save the HTML file.
Return to your web 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 Volcano Web page.

"Postage Stamp" Images

Previously, we advised against using large inline images in your web pages because viewers might have to wait a long time for images to download to their computer. One way around this is to create miniature-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 links to the full size image. In this way, the large images are downloaded only if the viewer decides to see it.

First, you need to get a copy of the two image files from the Lesson 8e Image Studio. (These files should be stored in your pictures folder/directory of your workarea).

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

Open the index.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.
 
 <a href="../pictures/seismo.jpg"> 
 <img src="../pictures/stamp.gif" ALT="link to large image" 
 width="62px" height="85px">
 -- [full size image, 55k] --
 </a>
 
 This seismometer measures earthquakes 
 associated with subsurface volcanic forces.
```
The inline image, stamp.gif acts as a hyperlink to a larger image, seismo.jpg. When a user clicks on either the "postage stamp" or the text "-- [full size image, 55k] --", your web browser will display the larger image in a browser page.

Note the use of the dimensions of the stamp.gif image in the <img...> tag as well as the ALT=... attribute.

In our hypertext link we provide information that this image is 55k in size. By doing this, you provide the viewer the choice if they want to download an image of that size... If the link leads to something that is 1.6 Mb, as a viewer you might want to know that before you tried to view such a large file size.
Save and Reload in your web browser.

Check Your Work

Compare your web page with a sample of how this document should appear. If your web page was different from the sample, review the text you entered in the text editor. Some of the more common mistakes are discrepancies between spelling of the file names and the HTML code for the anchor links or not having the image files in the same directory as the HTML files. If you see an icon of a broken picture:

blah blah blah blah blah blah blah blah blah blah blah blah

then it usually means the HTML does not match the file listed in the <img> tag or that the image is not in a GIF or JPEG format.

Review

Review topics for this lesson:

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

Independent Practice

Try to add buttons that link two web pages to each other. In a later lesson we will learn how to avoide the "box" around a hypergraphic.

Coming Next....

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

GO TO.... | Lesson Index | previous: "Named Anchors" | next: "Preformatted Text" |

Writing HTML: Lesson 8e: HyperGraphics
©1994-1999 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

URL: http://www.mcli.dist.maricopa.edu/tut/tut8e.html