Image Tags

Image Tags

To include images within your documents you need to use the image tag. The most widely supported picture types are gif and jpeg but there is a newer type called a png. The image is called from a URL where it is stored.

alt	alternative name for text browsers
align	top -aligns text with top of picture middle -aligns text with middle of picture bottom -aligns text with bottom of picture
align	left -moves picture to left margin with text beside height of picture right -moves picture to right margin with text beside height of picture
width	number of pixels to display on screen
height	number of pixels to display on screen
vspace	number of pixels to add as vertical spacing
hspace	number of pixels to add as horizontal spacing
border	number of pixels to add as a border to picture
ismap	tag that indicates that picture is a click-able image-map
???	where is my picture

default and alt [top of page]

	text at bottom
	[pepper] - displayed by text browsers

align - vertical [top of page]

	text at top
	text at middle
	text at bottom

align - horizontal [top of page]

	This will align the picture to the left side of the current margin. Notice that the text in this situation will continue along the side the picture until there is enough clearance for the text to go underneath the picture.
	This will align the picture to the right side of the current margin. Notice that the text in this situation will continue along the side of the picture until there is enough clearance for the text to go underneath the picture.

height and width [top of page]: Pages will load faster if you specify the picture height and width (in pixels). This allows the browser to start formatting the rest of the page without having to wait to see how big the picture is. You may not notice unless you try to load a large picture or a page that contains many pictures. It's still a recommended practice.

vspace and hspace [top of page]: Pictures sometimes need some padding around the outside of their borders. The vspace and hspace tags will accomplish this.

br clear=all [top of page]: Sometimes, as in the previous paragraph, there might not be enough text to fill the horizontal space that the picture occupies. It might not be appropriate for you to continue the next paragraph next to the picture. The <br clear=all> tag will issue a line break and clear room until you are below the picture. This command was added at the end of the last paragraph.

border [top of page]: You might find it convenient to draw a border around the outside of a picture. If you want to do this use the border command.

ImageMaps [top of page]

It is possible to create a clickable image within an HTML document. Clicking on different parts of the picture would take the viewer to another URL. The image below is a test image with a square, circle, polygon and a background. Clicking on the

yellow background will take you to the default page
red rectangle will take you to a red page
green circle will take you to a green page
blue polygon will take you to a blue page

In order for these image-maps to work, you must create a translation file. If you move the mouse around on the image-map, you should notice that there are numbers (x,y) that change corresponding to the location of the cursor on the picture. When you click on a spot the (x,y) coordinates are translated to a table that send you to a new URL.

Method 1 (server side) image-map

file name= mapdemo.gif.map     contents below
default  yellow.shtml
rect     red.shtml    8,8 47,30
circle   green.shtml  27,46 27,30 
poly     blue.shtml   2,45 27,79 49,48 
                          49,80  0,80  2,45
 
this method requires this additional file

The entire image is (54,84). The default is defined as, if you don't click on any specific object you must have clicked on the default (here it is the yellow background area.) The rectangle (rect) starts at (8,8) upper left and goes down to (47,30) lower right. You can write down the coordinates after you have the image displayed in Netscape (or there are programs that will generate an image-map based on the overlaying shapes you draw). The circle (circ) starts about (12,30) and goes to (43,64). The polygon (poly) has five separate vertices -- so ending in the starting position, you have six points. Kind of reminds me of connect the dots from a few years back.
This file must be uploaded to your storage area and referenced from your html document. The cgi-program that translates the image-map must be available on the Server.

Method 2 (client side - imagemaps)

<IMG SRC="gif/mapdemo.gif"      
      USEMAP="image.shtml#FourColorMap">
  <MAP NAME="FourColorMap">
    <AREA SHAPE="RECT" 
         COORDS= "8,8 47,30" HREF="red.shtml">
    <AREA SHAPE="circle" 
         COORDS= "27,46 16" HREF="green.shtml">
    <AREA SHAPE="poly" 
         COORDS= "2,45 27,79 49,48 49,80 0,80 2,45"
         HREF="blue.shtml">
   </MAP>

Where is the picture [top of page]: This icon (or one similar) will show up if you reference a picture that is not available. It is possible that the file name is incorrect, the file is in a different location, or the permissions on the file are not set for everyone to view.

last modified February 01, 2006 42787