Sponsored Links

HTML Image Element

The <IMG> element allows you to embed different types of images on your web page. The most common types of images are JPG, GIF's, and animated GIFs. A new format, PNG, is also starting to be supported in the 4.0 browsers.

Adding an image to a page is as simple as specifying the IMG element with a SRC:

<IMG SRC="/gifs/inside.jpg" 
     ALT="Inside Dynamic HTML Book Cover" 
     WIDTH=117 HEIGHT=146>

While all that is required to display an image is the SRC, you will get better performance if you also include a WIDTH and HEIGHT attribute. The width and height attribute ensures space is allocated for the image. Otherwise, browsers earlier than Internet Explorer 4.0 will need to wait for the image to download with its size information before any rendering can continue. Internet Explorer 4.0 will continue to render the page and once the images size is known, immediately reorganizes the page with the image in place.

Turning Images into Links

Earlier we introduced how to create a link to another document. Images can also be used to create a link to another page. The simplest way to turn an image into a link is to wrap it with the <A> element:

<A HREF="http://www.insideDHTML.com">
  <IMG SRC="/gifs/inside.jpg" 
       ALT="Inside Dynamic HTML Book Cover" 
       WIDTH=117 HEIGHT=146>
</A>

Now, if the image defined by the above HTML was clicked upon, the user would navigate to http://www.insideDHTML.com.

Creating Image Maps

A more sophisticated use of images is break a single image up into multiple links. This requires the creation of an image map. An image map defines where different areas of an image will navigate to when clicked upon. For example, on our home page we have a navigation bar to other sites in the former WebMonkey Network. Clicking on different portions of the image navigate you to different sites.

The navigation bar above is defined as follows:

<MAP NAME="monkeybar">
  <AREA SHAPE=RECT 
        COORDS="0,29,129,44" 
        HREF="http://www.pcwebopedia.com/">
  <AREA SHAPE=RECT 
        COORDS="130,29,245,44" 
        HREF="http://www.insidedhtml.com/">
  <AREA SHAPE=RECT 
        COORDS="246,29,349,44" 
        HREF="http://www.highfive.com/">
  <AREA SHAPE=RECT 
        COORDS="350,29,468,44" 
        HREF="http://www.hotwired.com/webmonkey/">
  <AREA SHAPE=RECT 
        COORDS="367,0,440,28" 
        HREF="http://www.hotwired.com/webmonkey/network/index.html">
  <AREA SHAPE=RECT 
        COORDS="439,0,468,28" 
        HREF="http://www.hotwired.com/webmonkey/">
  <AREA SHAPE=RECT 
        COORDS="0,1,367,28" 
        HREF="http://www.hotwired.com/webmonkey/">
  <AREA SHAPE=default 
        HREF="http://www.hotwired.com/webmonkey/">
</MAP>
<IMG STYLE="border: none" 
     SRC="/gifs/wmnetwork.gif" 
     USEMAP="#monkeybar" BORDER=0 
     WIDTH=468 HEIGHT=47 ALT="The Webmonkey Network">

Defining the Image Map requires both defining the <MAP> and associating this map with a particular image. The association between the image and the image map is made using the USEMAP attribute on the image. This attribute contains a link to the image map. In the image above, the link is made between the image and the <MAP> element with the name "monkeybar".

The image map is defined by specifying <AREA> elements. These elements specify the shape and coordinates inside the image. When these regions are clicked upon, the user is navigated to the destination specifed by the HREF attribute.

Using Dynamic HTML you can manipulate the image map. You can read an excerpt^IE4 from the book, Inside Dynamic HTML, on how to program both images and image maps online.

Object Element...