Inside Technique : Back to Basics with Images : Images as Links

You now have seen the basics for creating an image. By enclosing the image in an A element, you can turn the image into a link that navigates you to another location:

<A HREF="/dhtml/insidedhtml.asp">
  <IMG SRC="images/insided.gif" 
       WIDTH=100 HEIGHT=200 
       ALT="Book cover for Scott Isaacs book, Inside Dynamic HTML">
</A>

When the user clicks on the image, it takes them to the page specified by the link (A HREF="..."). Images that are wrapped by the A tag are also given a default border. This border represents that the image is a link. This border can be controlled by the author to not be rendered by specifying BORDER=0 on the image element:

<A HREF="/dhtml/insidedhtml.asp">
  <IMG BORDER=0 
   SRC="images/insided.gif" 
   WIDTH=100 HEIGHT=200 
   ALT="Book cover for Scott Isaacs' book, Inside Dynamic HTML">
</A>

If you use images as links on your web-pages, the ALT text becomes even more important. If the link images are unavailable and no alt text is specified, your visitor will not know where to navigate on the site.

Naming your image

The last attribute we introduce is the NAME attribute. When authoring HTML, you do not need to provide your image with a name. However, once you want to script your image, adding a name makes it much easier to access. Therefore, when scripting images, we recommend you provide it with a unique name. The following HTML fragment demonstrates all the attributes discussed up to this point.

<A HREF="/dhtml/insidedhtml.asp">
  <IMG NAME=bookCover 
       SUPRESS 
       BORDER=0 
       SRC="images/insided.gif" 
       WIDTH=100 HEIGHT=200 
       HSPACE=5 VSPACE=5
       ALT="Book cover for Scott Isaacs book, Inside Dynamic HTML">
       TITLE="The Book, Inside Dynamic HTML"
</A>

Images and Image Maps

Images can also be subdivided into multiple click regions where each click region represents a different link. This is called adding an image map to the image. Creating and manipulating image maps will be a topic for a future article.

Next we start discussing scripting the image and show you how to use JavaScript to manipulate the image.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.