HTML and Images

The IMG tag

You can include images in your HTML document using the IMG tag. The actual images themselves can be anywhere on the WWW, so your web page can include images that come from another site. The IMG tag has one required attribute - the SRC attribute specifies the URL that contains the image. Typically the URL will indicate a static file that contains either a GIF or JPG image (two standard file formats for images)

A simple example of an IMG tag and what this looks like when the browser renders it:

Here is my image: <IMG SRC=cookie.gif>

Here is my image:

Images can be hyperlinks, all you need to do is put the IMG tag between the <A> tag and it's end tag </A>. Here is an example:

Press the cookie to go to cookie.com
<A href="http://www.cookie.com">
<IMG SRC=cookie.gif>
</A>

rendered will look like this:

Press the cookie to go to cookie.com

• ALT - used to specify some alternative text that the browser should display if the image is not available or the user has disabled loading of images. It is common to provide some kind of image description via an ALT attribute. The text specified as the value of the ALT attribute can be up to 1024 characters (but no more). Example:

  Dave's Pictures: <IMG SRC=USA90.gif ALT="US World Cup 90 Soccer Team - Dave is third from the left">

  rendered will look like this:

  Dave's Pictures:

• LONGDESC - Like ALT, but specified as a URL that refers to a description (of any length).

• BORDER - You can put a border around an image by including a BORDER attribute in the IMG tag. The value of the BORDER attribute is the size of the border you want (in pixels). An example:

  My favorite cookie: <IMG SRC=cookie.gif BORDER=10>

  My favorite cookie:

  Images that are links (you can click on the image) are drawn with a border by default - you can remove this border by saying BORDER=0. To create a clickable image just put the image tag between a <A> and </A>

• HEIGHT and WIDTH attributes allow you to tell the browser how much space to use for an image. The browser will scale the image up or down to match the values of these attributes. Both the HEIGHT and WIDTH attribute values are integers that indicate a number of pixels. Example:

  What size cookie do you want? <UL> <LI>Small <IMG SRC=cookie.gif WIDTH=20 HEIGHT=20></LI> <LI>Medium <IMG SRC=cookie.gif WIDTH=100 HEIGHT=100></LI> <LI>Large <IMG SRC=cookie.gif WIDTH=200 HEIGHT=200></LI> <LI>X-Large <IMG SRC=cookie.gif WIDTH=400 HEIGHT=400></LI> </UL>

  Will look like this:

  What size cookie do you want? Small Medium Large X-Large

• ALIGN - you can control the alignment of images with the ALIGN attribute. The valid values include:

• MIDDLE - middle of the image is aligned with the text in the current line.
• BOTTOM - bottom of the image is aligned with the bottom of text
Examples:

The good old cookie zigzag: <IMG SRC=cookie.gif HEIGHT=40 WIDTH=40 ALIGN=MIDDLE> <IMG SRC=cookie.gif HEIGHT=40 WIDTH=40 ALIGN=BOTTOM> <IMG SRC=cookie.gif HEIGHT=40 WIDTH=40 ALIGN=MIDDLE> <IMG SRC=cookie.gif HEIGHT=40 WIDTH=40 ALIGN=BOTTOM>

The good old cookie zigzag:

• LEFT and RIGHT allow you to tell the browser to put the image to the left or right of the text, and to wrap the text around the image. For example:

  <P><IMG SRC=cookie.gif WIDTH=70 ALIGN=LEFT BORDER=1> Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie </P> <HR> <P><IMG SRC=cookie.gif WIDTH=70 ALIGN=RIGHT BORDER=0> Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie </P> <HR> <P><IMG SRC=cookie.gif WIDTH=70 ALIGN=LEFT BORDER=0> <IMG SRC=cookie.gif WIDTH=70 ALIGN=RIGHT BORDER=0> Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie </P>

  Will look like this:

  Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie

• ISMAP - the ISMAP attribute tells the browser that the image is a clickable map. Maps are used on conjuction with a CGI program - we haven't talked about CGI yet, but the basic idea is that a program will be run on the server when the user clicks on the map, and the coordinates of the mouse in the image will be transmitted to the program (so it can decide what to do based on where you click).

  When a user clicks on a map image that is within an A tag, the browser sends a request to the URL specified in the A tag and also sends a query string. (We haven't discussed query strings yet - this will come later also). The query string has the form x,y where x is the x coordinate of the mouse on the image when the user clicked, and y is the value of the y coordinate (both coordinates are in pixels). Here is an example, although the vote.cgi program does not exist, you can see what the query would be by looking at the bottom bar of your browser as you move the mouse over the image.

  Vote for the best chip in my cookie: <A HREF=vote.cgi> <IMG SRC=cookie.gif ALIGN=center ISMAP> </A>

  Vote for the best chip in my cookie:

  NOTE: This kind of imagemap is call a "server-side" map, since the server (typically a CGI program) must determine what to do when the x,y coordinates of a user click are sent to a CGI program.

• USEMAP - supports "client-side" image mapping, where the browser takes care of figuring out what URL to request based on where in an image a user clicks. The value of the USEMAP attribute is the URL of a map that is defined in an HTML document (typically in the same document as the IMG tag itself). A map is created with the HTML MAP tag. Here is a simple example:

  Vote for the best chip in my cookie: <IMG SRC=cookie.gif ALIGN=center USEMAP="#cookiemap"> <MAP name="cookiemap"> <AREA COORDS="22,38,41,59" SHAPE=RECT HREF="vote.cgi?chip1"> <AREA COORDS="28,63,54,82" SHAPE=RECT HREF="vote.cgi?chip2"> <AREA COORDS="55,59,88,70" SHAPE=RECT HREF="vote.cgi?chip3"> </MAP>

  Vote for the best chip in my cookie:

  Inside a MAP tag you define each hotspot by specifying the shape, location and size of the hostspot as well as the URL that the browser should load if the user clicks over the hotspot. Each hotspot is specified using an AREA tag - which understand the attributes SHAPE (which can be rect, circle, poly, ...), COORDS which are a sequence of image coordinates in pixels (top left of the image is 0,0), and an HREF attribute that specifies the destination URL.

  There are programs available that make it easy to generate HTML maps interactively by pointing to hotspots on an image. For most images it is possible to divide the image in to rectanges by guessing at pixel coordinate values and then load the page and see if your guesses are accurate (and if not, adjusting the coordinates). Most browsers will display the destination URL in the status line (bottom of the browser window) whenever the mouse is over a hotspot. Try it on the sample image above...

Image File Format: GIF vs. JPG

The image file formats supported by most browsers are GIF, JPG (pronounced jaypeg), and PNG (Portable Network Graphics). There are differences you might want to be aware of.

There have been licensing issues associate with the GIF format, although it is often used for icons, drawings and anything requiring animation. JPG is typically used for photographs. PNG is used for lots of things...