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 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 noew can alter the color of hypertext and some pages have supressed 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.Now we will create a "hyper" graphic button. First, you need to get a copy of this arrow button (img alt="- >" src=left.gif">. If you need help for saving image files, see the reference page on downloading. When you are ready, view and save the arrow button GIF file as a file named left.gif.
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= option in the <IMG...> tag in case the viewer has turned off the loading of images.
You should now have a copy of the file somewhere on your computer (it shbould be saved in the same folder/directory as your working files). Next, add the HTML to make the button work:
<hr> <a href="volc.html"> <img src="left.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 (for more on this tag see lesson 4).
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 the two image files. If you need help 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 seismo.jpg
Next, create the postage stamp link in your main text file:
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.
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 "Click to view full size image --", your WWW browser will display the larger image in an external window.
The Internet Connection at MCLI is
Alan Levine --}
Comments to firstname.lastname@example.org