8e. Hyper Graphics

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

A HYPERLINK BUTTON

Now I hope in the previous lessons, you have (hopefully) become comfortable with creating hypertext links, text that's within your documents that connects a viewer to related information or other documents. You can also use inline images (see Lesson 7a) to act in a "hyper" manner. If you recall, in an earlier lesson I showed you how to link some text in our Eazy Space Tours page, index.htm, to a second page we had created, issapissin.htm, which described Mt. Issapissin. Now in that page, we want to add a button so that when it's clicked, it 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.htm"><img src="filename.gif" /> Go to Document X</a>

Inside of your web page, this HTML code will display an inline image and the text Go to Document X. Both of these will act as hyperlinks; clicking either the text or the picture will tell your web browser to go to the HTML file fileX.htm. The image on its own could be a hyperlink. In the World Wide Web, a "Hyper Graphic" generally is surrounded by a coloured box matching the colour of hypertext on your web page, so like the hypertext it would have a blue outline all the way round it so you know that it is "active".

But really, who wants a coloured border like that around there images?? Not me, so we are now going to show you how to turn them off with an attribute tag for the <img... /> tag.

   <a href="fileX.htm"><img src="filename.gif" border="0" />
   Go to Document X</a>

See that attribute in the <img... /> tag?? border="0". That turns the borders on and off surrounding your images. So now your swish buttons you've made or down loaded off the net no longer have a border. They are just "Hyper Graphics" and the way you wanted them to look.

The border="0" attribute has no meaning if the <img.../> tag is not inside of an <a href=>...</a> tag.

NOTE: Many browsers can now alter the colour of hypertext and some pages have automatically suppressed the display of the outline around Hyper Graphic links. Normally, you can identify a hyperlink area on a web page simply 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 with a pointing finger ready to click when it passes over an active link.

From a design standpoint, I recommend that if you should choose to use pictures to act as hyperlinks that you should also offer a text link as well or use the alt="" attribute in the <img... /> tag in case your page viewer has turned off the loading of images.

Now we are going to create a "hyper" graphic button. First, you need to get a copy of an arrow button from the Image Studio.

You should now have a copy of the arrow pointing left image file somewhere on your computer. (Preferably you should move it to the images folder/directory in your work area)

Next, add the HTML to make the button work:

1. Open the second HTML file, issapissin.htm in your text editor.
2. At the bottom, modify the last line to:

   <hr />
   <a href="../index.htm#intro">
   <img src="images/buttonleft.jpg" border="0">
   Return to <i>Eazy Space Tours</i></a>

   Note: The inline image tag (<img.../>) is completely inside the anchor tags, 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 also to emphasize the title. 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).

3. Save and Reload the HTML file in your web browser.
4. Use the hyperlink to the Mt. Issapissin page and the new button that you just added should return you to the Eazy Space Tours Web page.

POSTAGE STAMP IMAGES

Now previously in earlier lessons, we had advised you against using large inline images on your web pages because some viewers might have to wait a long time for images to download to their computer. One way to get around this is to create miniature-size copies of the graphic, or "postage stamps" which are then displayed as inline graphics. Then, using the same exact 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 they want to see it.

Firstly, you're going to need to get a copy of the two image files from the Image Studio. (These files should be stored in your images folder/directory of your work area).

Next, create the postage stamp link in your issapissin.htm file:

1. Open the issapissin.htm file in your text editor.
2. Above your <hr /> tag enter the following:

   <p>
    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>
   <p>
    <a href="images/seismo.jpg"> 
     <img src="images/stamp.gif" ALT="link to large image" 
     width="62" height="85" border="0">
     -- [full size image, 55k] --
     </a>
   </p>
   <p>
   This seismometer measures earthquakes 
   associated with subsurface volcanic forces.
   </p>

   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 "-- [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.

3. Save and Reload in your web browser.

CHECK YOUR WORK
Compare your document with a SAMPLE of how this document should look. If your page looks different than the example; review the text you entered in the text editor. Make sure it matches the text instructions in the 8e. Hyper Graphics section of this lesson. After viewing the sample, you can close the window that opened.

Practice
Try to add buttons that link two web pages to each other. 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 Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah

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

Top of page | Previous Lesson| Lessons Index | Next Lesson