How Do I Turn a Link Into an Image?

by Kristen Waters

Images can improve the appearance of a web page by breaking up the text and adding visual interest. The images that are visible on a web page are actually links to either an internal or remote image. In other words, the images are another file, either on the same server as the web page or a remote server. In order to place an image inside a web page you must tell the browser where to look for the image. This information is placed in the "<img>" tag with the "src" attribute.

Creating the Image

If your image is held on the web server that hosts your web page, you can just place the name of the image in the tag like:<img src="my_image.jpg"> However, if your image is located on a remote server, you must place a link to the image in the tag like:<img src="http://www.externalsite.com/remote_image.jpg"> Whether you use a local or remote image, there are some attributes that you can use to align your image on the page. The "align" attribute is used to align the image horizontally. The values can be "right," "left" or center. For example, to place a remote image on the right side of the page, the HTML code would be:<img src="http://www.externalsite.com/remote_image.jpg" align="right"> The"valign" attribute is used to align the image vertically on the screen. The values can be "top," "bottom" and "center." To align the above example on the top right side of the screen, the code would be: <img src="http://www.externalsite.com/remote_image.jpg" align="right" valign="top"> Another attribute is the "alt" attribute. This is used to place text where the image should be if the visitor is using a text based web browser, or if the link to the image is broken. The "alt" attribute is used in the following manner: <img src="http://www.externalsite.com/remote_image.jpg" align="right" valign="top" alt="remote image"> Finally, you can make your image become a hyperlink by adding the "<a href>" tag. This allows visitors to click on the image to be taken to a remote page or to the photo itself. The HTML code to create an image with a hyperlink is: <a href="http://www.externalsite.com><img src="http://www.externalsite.com/remote_image.jpg" align="right" valign="top" alt="remote image"> </a>

About the Author

Kristen Waters has been writing for the computer industry since 2004. She has written training materials for both large and small computer companies as well as how-to and informative articles for many online publications. She holds Bachelor of Science degrees from both York College of Pennsylvania and the University of Maryland.

Photo Credits

  • photo_camera pc monitor image by Jorge Casais from Fotolia.com