Using an image as a link to another

A little user-friendly technique I’ve used in HTML is the act of using an image as a link, where the user clicks an image to activate the link. This can be a userful technique for making thumbnails in your webpage that can be easily navigated. Thumbnails also serve the function of organizing a webpage an making it feel less cluttered. Images can even be used to link to another, seperate image. This can be used for different methods such as a red herring for the user, where they expect one image but recieve another.

This technique can easily be done by first using the ‘img src’ function for the image that will be displayed as the thumbnail. Usually thumnails are much smaller than the actual image, so it should be no bigger than, say, 100 pixels across. Next, surround the image with ‘a ref’ tags that link to the larger image that will be displayed when the thumbnail is clicked.

For instance, if you wanted to have a thumbnail picture of an image named “pic1.jpg” that links to another image named “pic2.jpg” the coding would look something like this:

<a href=”pic2.jpg”><img src=”pic1.jpg” width=”100px” height=”100px”></a>

This linking method would also look great if a user is using a browser with a hover-zoom feature, so that when the mouse is hovering over the thumbnail image, the linked image will instantly pop up. Furthermore, you may even want to set the target of pic2.jpg as “_blank”, which will open this image in a new tab.

-Zach Aaron


~ by zaa918 on September 17, 2012.

%d bloggers like this: