HTML : Adding Link to Images
A common practice on web is using images for hyperlinks. It is easy. Instead of wrapping text in <a></a> tags, wrap the <img/> tag in them. There is one slight problem; internet explorer and Firefox place a blue border around the image. This makes sense, the image is a hyperlink – your browser wants to notify the reader of this fact. But most of the times, the border appears aesthetically out of the place. Removing the border is really simple. If you are happy to use any deprecated tags, then you are free to use the “border” attribute to specify that the image has no border. The following code snippet explains this:
“<img src=”/aa.jpeg” border=”0” height=”20” width= “20” alt= “an image without the borders”/>”
*Here “aa.jpeg” is the name of the image stored in the local directory i.e., where the html files are stored.
But the use of CSS is suggested over this method. If you are using Safari web browser, notice it does not add a border to image links unless you specify the image has a border.
Creating image links – thumbnails
A common practice is displaying a small image and then, when the users of the web page clicks it, the browser loads a full size image into a new window or in a new tab of the browser. For example, navigate to www.google.com, select images, type anything in the search bar that will give you the results in images, and click the search images button. What the browser returns is a page of thumbnail images. When you click on one of them, a frameset loads in your browser. The top frame shows the image’s thumbnail while the bottom loads the original page the image come from. The thumbnail in the top frame is a hyperlink. Click on it, and your browser loads the full size image in a new window or in a new tab.
In the method explained in the previous article, you made an image smaller by making its dimensions smaller (height and width). When you do this using the image element’s height and width attributes, you don’t make the image’s size in bytes any smaller. The browser just scales the image; downloading the 500K image takes the same amount of time regardless of its height and width specified in the “img” element. Thumbnails, in contrast, allow you is really interested in seeing the full size 500K image, they can click on the thumbnail to download it.
Thus, thumbnails are way better than the “img” element if you are trying to design a web site that deals with tons of images. By using the thumbnails not only you free the user’s browser from downloading any unnecessary images that the user in not interested in, but also it makes the rendering on the web page in the browser way faster than without using the thumbnails. Thus, depending on the requirements you are free to use any method that does the job.
In the next article, we would be studying about the image maps and the ways they are created in the HTML.
