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:
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>
Now, if the image defined by the above HTML was clicked upon, the user would navigate to
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:
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
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
Using Dynamic HTML you can manipulate the image map. You can read an excerptIE4 from the book, Inside Dynamic HTML, on how to program both images and image maps online.
Copyright © 1997-2008 InsideDHTML.com, LLC. All rights reserved.