Previously, we have discovered and learnt the HTML codes that apply to images along with a bunch of several other helpful aspects and HTML elements that can go with Inline Image Tag. Hyper-Graphics or better known as HTML Image Hyperlinks, however, are not the same as the already discussed image tags. Why not just let the chunks of texts enjoy the luxury and also the control to act as "hyper"?! It’s time that we amplify the flexibility of your web pages with graphics acting as hyperlinks! Yes... it can be done, and we'll be discussing it shortly.
Welcome to Lesson 9 (e) – Creating Image Hyperlinks
As discussed previously, what has endowed the web with such soaring popularity? It is the anchoring and linking ability of the World Wide Web that has made it a cut above the rest. It doesn’t really matter where the anchoring file/ document resides. You just put in the command to call it, and the web browser will do the rest for you! During the dawn days of HTML tags, it was solely the hunks of typed in content that enjoyed the luxury of being tagged as “hyper”, and probably that was what had worked as a naming convention Hyper-TEXT Markup Language; but of late, be it text or image, anything can serve as a hyperlink to any another page or document or site or anything within the domain of WWW.
It is the <a href> and </a> tags that are primarily used to creating hypertexts. Enclosed within these tags are the texts or images that are made to serve the purpose of page/ site jumping. The general format to add an image hyperlink is:
<a href="URL"><img src="TheImagePath"></a>
For example:
<a href=" http://www.f26.net/tutorials/html/language/09._anchoring/e._graphic_hyper_link/"> <img src="/images/yourimage.gif"></a>
Image hyperlinks can be created in 5 easy steps. Let's have a look at them:
- Open the link.html in a text editor.
- Spot the section wherein you would like to create an image hyperlink, and enter the following:
<a href="enter the file name"> <img src="/images/html.gif">
Return to <b>HTML Lessons</b></a>
Note: The tag for the inline image (<img...>) is completely enclosed within (>) and the anchoring tags <a>…</a> drawing.
- Once you’re done with the tag insertion, save your HTML document.
- Return to your web browser displaying the link.html file.
- Reload your document, and now you should be able to view the graphic hyperlink created.
The file size of an image is one of the most significant factors to be taken care of while creating hyper-graphics. With smaller file sizes, hyper-graphics can easily be done following the aforementioned steps. But what if your file size is large?! Creating hyper-graphics with large image files are certainly not possible. This is exactly where the role of “thumbnail” images comes into play.
If you remember precisely, when discussing about the HTML tags for inline images, we advised against using large inline images in your web pages as it might make your site viewers wait longer than necessary before the entire image gets downloaded completely. THUMBNAIL images are an alternative approach to display large inline graphics in miniature form. Under such circumstances, using the same steps as discussed above, you can link the "thumbnail" to the full size image. In this way, the large images are downloaded at the discretion of the viewers. Following is the format to make a postage stamp link:
<a href="../images/imagefile">
<img src="../images/stamp.gif" ALT="Click to view full-size image"
WIDTH="60" HEIGHT="80">
-- [full size image, 55k] --
</a>
In the aforesaid format, "images" refers to the folder/ directory wherein the image file resides. 'stamp.gif' is anchoring the full-size image. It is advisable to enter the image file size information in your hypertext link, so as to offer the viewer with a choice of viewing the full image, depending upon the image size.
Original Authors: Rajat
Edit Update Authors: M.A.Harris
Updated On: 27/05/2009
