How to Link a Small Picture to a Larger Picture in a Separate Browser Window
When displaying images on your webpage, create a "zoom" effect with your photos so that when a user clicks on the initial picture, she is taken to a new window that contains a bigger view of the graphic. This is an effective method for displaying media because littler images work better in a page layout; however, if you need to present more detail, offer your visitor this functionality. Using your computer's text editor application and HyperText Markup Language (HTML), take advantage of this technique to improve your own site.
Other People Are Reading
Instructions
-
-
1
Place your small and large digital pictures on your web host in the same folder that you keep your other website files in and make a note of this location.
-
2
Launch your text editor and create two new webpages. Place your cursor underneath the "<body>" tag in one of the files.
-
-
3
Type in the "<img>" code and follow this with the image location from step one to insert your larger photo on the page. For example:
<img src="http://www.domain.com/large_picture.jpg">
-
4
Name and save your file, place the document on your web host and remember this destination address. Go back to the second open document.
-
5
Place you cursor anywhere underneath the "<body>" tag and repeat step three, but this time enter the address for your smaller photo. For instance:
<img src="http://www.domain.com/small_picture.jpg">
-
6
Encompass your "<img>" code from Step 5 between opening and closing "anchor" tags to link this littler picture to the bigger one. After the opening "anchor" code, type in the address to the other web file in step four so that when a user clicks the image, they are taken to the larger picture in a separate browser window. To illustrate:
<a href="http://www.domain.com/large_picture.html"><img src="http://www.domain.com/small_picture.jpg"></a>
-
1
References
Resources
- Photo Credit Jupiterimages/Pixland/Getty Images
