Web Hosting by Netfirms | Free Domain Names by Netfirms

Learning HTML: Objects & Images

This chapter will show you how to incorporate other media (graphics, pictures, video, Java applets, etc.) or another HTML document into your page.

Inline Images

The <img> tag is used to insert images within your text.  These are called inline images.  Most browsers only support GIF and JPEG file types for inline images so you'll want to stick with those.  The location of the image file is specified in the src attribute and it can be a relative or an absolute URL.

If the image cannot be displayed, for example if you have images turned off or if you're using a text-only browser, the browser displays the text in the alt attribute instead.  The width and height attributes contain the image's dimensions (in pixels) and are required if you want fast-loading pages.

Here's the basic image code:

<p><img src="images/web.gif" alt="Spider's Web" width=32 height=32>The default code for an image.

The default code for an image.

You can turn an image into a link by simply embedding it in an <a> tag instead of, or with the linked text.  Let's see an example:

<p><a target="_blank" href="http://freenettools.netfirms.com/">
<img src="../../images/free.gif" style="float: text-bottom" alt="[ Free ]" width="28" height="27">The
Free 'Net Tools Home Page</a></p>

The Free 'Net Tools Home Page

There are also attributes for use with "image maps" which won't be discussed here, visit my Resources page for links to more in-depth references.

Jump to top

Client Side Image Maps

You know how to create a graphic image with a single hyperlink, but did you also know that you can specify additional hyperlinks. Let's look at the picture I have as my top-of-page banner - it is set it up so that if you click on the spider web, you go to my "contents.html" or "Table of Contents" page in the top-level directory, the text "Web Taming's Free 'Net Tools" goes to "index.htm", the Home Page for this site.

This technique is called an image map. What this means is you divide up sections of the graphic image and specify, "if someone clicks here, go to this page". You can divide the image in rectangles, circles and any kind of polygonal shape.

Let's start with a graphic.

Now break the graphic up into the clickable areas (these are called hot spots).

This image shows how this might look if you drew lines around the items.

Now you need to specify the pixel coordinates within the image for the rectangles, polygons and circles.  You should be able to do this in your graphics editing application

Okay, we're going to define a circle around the spider web and a rectangle around the text.

• For the circle you will need the pixel position of the center, the number of pixels from the left side to the center, and the number of pixels from the top to the center (this allows you to define ellipses and circles using the same tag).
• (For a polygon, you need the pixel coordinate (x and y) of each corner.)
• For the rectangle, you simply need the x and y coordinates of the top left and bottom right corners.

You need to include the <img ...> tag with a usemap attribute pointing to the name of your image map.  It's necessary to  include alt attributes on your clickable areas which will turn into tool-tips in your browser.

So, for our picture we wind up with the following tag:

<map name="FPMap4">
<area alt="Table of Contents" coords="19, 21, 16" shape="circle" 
  href="../../contents.html">
<area alt="Home Page" coords="37, 8, 326, 34" shape="rect" 
  href="../../index.htm">
</map>
<img border="0" src="../../images/banner327.gif" 
  alt="Web Taming's Free 'Net Tools" usemap="#FPMap4" width="327" 
  height="40">

This defines the client-side image map shown at the top of this page. If you hover your cursor over the various areas and click, you will see the results.

Jump to top

Objects

The <object ...></object> container allows embedding other media into a web page.  Sometimes, rather than linking to a new page, you may want to embed it directly into your page.  As an example, the following code embeds the contents of dummy3.htm at the location where the object tag occurs.

<P><OBJECT data="dummy3.htm">
Warning: dummy3.htm could not be embedded.
</OBJECT>

 It is too complicated to describe other attributes of the object tag in this tutorial so here is a link to the W3C page on Objects.

Iframe

<IFRAME src="dummy3.htm" width="400" height="100"
scrolling="auto" frameborder="1">
[Your user agent does not support frames or is currently configured
not to display frames. However, you may visit
<A href="dummy3.htm">the related document.</A>]
</IFRAME>

Jump to top

Previous Chapter | Home | Up | Next Chapter

Send feedback and kudos to: peterconrad@hotmail.com
Copyright © 2004 by Web Taming. All Rights Reserved.

For more attractions please visit my Personal Pages on Planet Tripod.