Linking Images
Linking images is just like linking text. Use the A (Anchor) element with the HREF attribute. The HREF attribute specifies the location of another resource located on the web - this can be another web page, an image, or anything else. This attribute defines a link between the source anchor (the A) and the destination anchor (the HREF):
<A HREF="http://www.hardcoder.com">Link to hardcoder.com</A>
This code will look like this:
Link to hardcoder.com.
To link images, just replace the text in betweeen the opening and closing "A" tags with an image. Like this:
<A HREF="http://www.hardcoder.com"><IMG SRC="examples/images/umper.jpg"></A>
This code will look like this:
Adding a Border Around an Image
You'll notice a colored border around the image above. That color is one of the colors I've specified as a LINK color - click here if you need more information on link colors. Because all my links are this color, and
the image is a link, it makes sense that the image has a colored border around it. But you don't always want a border around an image
especially if it's an imagemap or a small part of a bigger picture.
You can turn that border off with the BORDER attribute of the IMG element:
<IMG SRC="examples/images/umper.jpg BORDER="0">
Conversely, you can make the border wider around your image by setting the BORDER attribute to whatever pixel width you'd like:
<IMG SRC="examples/images/umper.jpg BORDER="10">
This code looks like:
The color of the border will depend on your specifications. If the image is linked, the border color will be the color you
set for your link colors (either LINK or VLINK). If you do not specify any colors for these, they are by default
blue (for links you haven't visited yet) and purple (for links you've visited). If the image is not linked, the border color will be
the same color as your text. In Netscape you can change the border color to whatever color you want by using the <FONT COLOR="color"> tag:
<FONT COLOR="FF00FF"><IMG SRC="examples/images/umper.jpg" BORDER="10"></FONT>
This code looks like:
If you're using Internet Explorer, you won't see that the border around this image is purple.
Next Page: Introduction to HTML Tables
Previous Page: Aligning Images & Text
