HTML: Using a picture as a link to a larger version of that picture

If you have a picture that is too large for the page, but still want to be able to show people the large image, create a link to that larger image. A good way to do this is to use a smaller sized version of said picture in order to give the user a preview or to entice them to click it. This can be done different ways, Here is an easy one:

how to create an awesome link

to explain further: an a tag is placed around the picture you want to use as a link. In the css, under the a tag, set border:none and text-decoration:none if you do not want any colors surrounding the picture. Next, under the css for the img tag, make the width something that fits within your page like 450px; This will take a little longer to load on the page, but if you set the href in the a tag to the same thing as the src in the img tag, you will have a perfectly working image link to a larger version of that same image!

In fact, if you click the above image of html code (white background), you can see this effect in action. It makes the type readable!


Casey Bradford

~ by caseybradfo on November 1, 2011.

2 Responses to “HTML: Using a picture as a link to a larger version of that picture”

  1. I think that this is an important topic to cover; however, the image you’ve included is very difficult to read. It would be helpful to see what code to include.

  2. While this is definitely a useful post, I’d be more likely to read it and understand its advice if it were formatted a little differently. The longer paragraphs could be a slight deterrent for those looking for quick, breezy directions on how to perform this task. Also, the illustration is a little too tiny to be readable. Making it larger, perhaps by breaking up the text onto more than just the two lines and allowing it to take up more vertical room, would go a long way. However, the explanation after the example tag is very handy. It increases my understanding of the task a lot.

    – Cathy

Comments are closed.

%d bloggers like this: