XHTML: Images

From Academic Computing

[edit] Purpose

Introduces students to the markup used to insert and format images on a web page, and also explains the process for creating an image map.

[edit] Prerequisites

Students wishing to participate in this workshop must be familiar with basic markup (HTML or XHTML) tags and attributes used for creating a simple web page. Students new to creating web pages should first attend the XHTML: Introduction workshop. Typing skills will be beneficial. Students wishing to save any work created in class should bring a formatted floppy disk.

[edit] Images Overview

If you've browsed around the web, you've certainly noticed that almost every web page contains some type of images or graphics. That's really what the web is anyway. It is the graphical portion of the Internet.

There are two main image formats that you can use on the web and that your web browser (MS Internet Explorer, Netscape Navigator, Opera, AOL, etc.) can display: GIF and JPG

.gif
gif images are the most common image type for the web. Almost every banner ad you see on the web is gif type. gif images can accept no more than 256 colors, so they are ideal for non-photo quality pictures and graphics. Company logos, cartoons, and banners generally have very few colors and work will with the gif format. gif images are also used to create animated images on the web. We have a workshop devoted to learning how to create animated gif images using PSP Animation Shop.

.jpg
jpg images can accept up to 16.7 million colors, so they are ideal if you are saving a photo to put on the web. If you go to a news site and see photos, or very high quality graphics, they are most likely jpg images. Because they can produce more detailed images and photos, jpg uses compression to help speed file transfer. Unfortunately, repeated compression (during file transfer) and uncompress ion (during viewing) tends to deteriorate the quality of jpg images. gif images don't suffer from quality deterioration.

The image format you use will depend on the image. If you want to display photos, then use jpg. If you want to create buttons, banners, or logos, use gif. Some photos still look pretty decent in the reduced color gif format. You may find that the reduced color depth of gif is acceptable for some photos.

[edit] Saving an Image off the Web

One of the best ways to find images for your web sites are looking on the web. There are dozens of web sites devoted to providing you with free web graphics that you can use for your own site. Some of those sites are listed in the resources section of this handout. Others you can find by searching with a search engine or web directory. Use "free images" or "free pictures" for keywords and you will get a lot of options.

The following steps involved in saving an image off the web are for MS Internet Explorer. However, the procedure for all graphical browsers is almost identical.

Place your cursor over the free image you would like to copy.
Right-click your mouse and choose "Save Picture As…" from the menu.
Choose a saving location. Ideally, this will be the same folder as your hypertext document.
Rename the image (optional).

Make a mental note of the image format—either jpg or gif.
Do not type the format extension after the file name if you rename the file.

Click the "Save" button.

When you save an image off the web, make sure that you don't change it from it original format (gif or jpg). It is also a good habit to save the image using all lower-case letters. If the image has some capitalization, you'll have to reproduce that capitalization when you insert the image. If you use lower-case all the time, you'll never have to try to remember if there was a capital letter in there somewhere.

[edit] Inserting an Image on a Web Page

The markup tag used to insert an image is super easy. Within the <body> section of your document, type the following code where you want the image to display.

<img src="imagename.gif" />

"imagename.gif" is a value for the source (src) attribute. You'll put in the name of whatever image you want to insert. The code sample above is the most basic image tag, but there are some other attributes which every image should have in addition to the source attribute.

[edit] Image Attributes

There are a few image attributes in addition to the source attribute that every image should contain, even though the image will display without them. Height, width, and alt are all necessary attributes for valid markup.

[edit] Sizing an Image

Putting in size attributes is important for every image you use, even if you want to keep it at the original size. Image using the height and width attribute will allow a page to load content faster, because the browser will know how big the images are going to be before the images load. Without these attributes, the images will have to load first, then the content.

<img src="aclogo-r.gif" height="150" width="150" />

height="pixels"
Controls the height of the image in pixels.

width="pixels"
Controls the width of the image in pixels.

[edit] Alternate Image Text

Another important attribute is the alt attribute. The alt attribute is used to provide someone with useful information that would otherwise be presented in the image. This is necessary for people with text-only browsers, browsers that read the text aloud, or browsers that covert the text into Braille.

<img src="aclogo-r.gif" alt="link to AC home page" height="150" width="150" />

alt="alternate text"
The alt attribute should not be used to describe the image itself. Instead, the alt attribute should be used to describe the purpose of the image. If an image is used for navigation, then the alt attribute should state where the image links to. If the image is an advertisement banner or title banner, the alt attribute should state that.

[edit] Aligning the Image with Text

Web pages are made up of text and images, so it is good to know how to display them together in a manner that makes both easy to view.

<img src="aclogo-r.gif" align="right" height="150" width="150" alt="link to AC home page" />

align="left | right | top | center | bottom"
If you choose align left or right, the image will display on the left or right of the page, and text will wrap around the image. If top, center, or bottom is chosen, the image will display where the image tag is located and the first line of text will display

[edit] Horizontal & Vertical Spacing

Sometimes it is good to put a cushion of space around an image. This will prevent text or other images from getting too close. A cushion of space around an image is especially useful when you wrap text around an image using align="right" or align="left". To control space around an image, try these:

<img src="aclogo-r.gif" hspace="15" vspace="15" height="150" width="150" alt="test image" />

hspace="pixels"
Creates a cushion of space on the left and right sides of an image.

vspace="pixels"
Creates a cushion of space above and below an image.

[edit] Image Borders

By default, an image inserted into a web page will not have a border unless it is made into a hyperlink. However, you can set a border around your image and control the thickness.

<img src="aclogo-r.gif" border="5" height="150" width="150" alt="test image />

border="pixels"
Creates a solid border around the image. To keep from having a border when the image is made into a hyperlink, the attribute value should be set to zero (0). border="0"

[edit] Low Resolution Alternative

Netscape Navigator offers a cool image attribute that will load a lower quality image before the normal image. Some images can take a while to load. With lowsrc, the web visitor can get a rough version of an image quickly, and the higher quality version will replace it when it loads. This feature does not work in MS Internet Explorer.

<img src="aclogo-r.gif" lowsrc="aclogo-low.gif" height="150" width="150" />

Keep in mind, for this to work you will have to have two versions of the same image: a standard version and a low-quality version.

[edit] Creating an Image Link

Images can be converted into hyperlinks just as easily as text can. You could create buttons for the different pages of your site and use anchor tags and href attributes to turn those buttons into links. This makes a very nice navigation system that many professional sites use.

<a href="http://www.usf.edu">
<img src="aclogo-r.gif" height="150" width="150"
alt="click to link to USF web site" /></a>

[edit] Creating Image Maps

Image maps allow you to make different hyperlink areas on a single image so that users can click on these different parts and open up other web pages, sites, images, etc. You could rig an image photo of a group of people so that each person in the photo would be a link to a web page about that person. You could take a map of the US and make each state a link to the state government web sites. You could make a cool web page banner and navigation menu that allowed the user to click on the menu items in the image and link to other pages.

[edit] Sample Image Maps

So that you can really see the benefit of using image maps, check out some of the sites listed below. You've probably come across image maps before while browsing the web, but weren't aware of it.

USF College of Business – http://www.coba.usf.edu
The COBA logo and the "University of South Florida" text right below it are all part of one image. However, only the text is a hyperlink. This is a very simple image map (only one hyperlink area), yet functional.

Yahoo! – http://www.yahoo.com
The Yahoo! logo at the top of the page and the four round "buttons" surrounding it are all part of one image, converted to an image map.

Mr. Showbiz – http://www.mrshowbiz.com
The seven rectangular "buttons" on the left side below the Mr. Showbiz logo are all part of one image, converted to an image map.

US Census Bureau – http://www.census.gov/jobs2000/www/where.html
The US Census Bureau uses a map of the United States as an image map. Each state is a hyperlink to Census offices in a particular state. This is a big image map with 50 hyperlink areas.

[edit] Mapping an Image

In order to designate the areas to click on an image map, you need to determine the image's pixel coordinates. For this handout, I'm going to practice with a simple image that contains a rectangle, polygon, and circle. If you are using this handout in print form, you can go to the images handout online at: http://www.acomp.usf.edu/ACStudent/workshops/webdesign/xhtml_2_images.html. From there, find the image pictured to the right and save it to disk. Or, you can be super creative and make your own image to practice with.

There are a couple of ways you can determine the pixel coordinates of an image. One of the easiest ways is to just open the picture up in an image editing program like Paint Shop Pro, Photoshop, or IrfanView. Almost every image editing program will display the coordinates of the image as you move your cursor over the image.

You can also find the coordinates by purposely putting in some non-working tags and attributes. This will trick the browser and the image's coordinates will be displayed in the status bar of the browser as you move your cursor over the image.

<a href="dummy">
<img src="maptest.gif" ismap /></a>

[edit] Area Coordinates

Use the artificial hyperlink above or an image editor to determine the x,y coordinates of an image. The shape of the hyperlink area you want to create will determine where on the shape you need to get coordinates from. The three shape you can make are:

shape="rect"
The rectangle shape requires that you get two sets of coordinates—the top-left corner and the bottom-right corner. The coordinates for the top-left corner of the gray rectangle are 24,16. The bottom-right corner is 128,53.

shape="poly"
Use a polygon shape to make a hyperlink area out of anything that doesn't fit in a standard rectangle or circle. States on a US map would need polygon shapes. People in a photo would need polygon shapes. You need the x,y coordinates from every point on the polygon where the perimeter changes direction. The polygon above has 5 points surrounding it, and there x,y coordinates are: 12,71 51,79 72,107 52,125 19,105.

shape="circle"
To create a circular hyperlink area on an image map, you need to know the x,y coordinates for the center of the circle, and the pixel radius of the circle. Put your cursor in the center of the circle (as close as you can). This circle's center x,y coordinates are about 114,100. To find the radius, move your cursor down from the center point to the edge of the circle. Subtract the perimeter y coordinate from the center y coordinate (130-100) to get the radius of the circle. This circle's radius is about 30.

Make sure that when you are determining different hyperlink areas on an image that the areas do not overlap. If they do, the image map won't work.

[edit] Entering the Map Markup

Once you know the coordinates for the different hyperlink areas, you can enter the map markup.

<img src="maptest.gif" usemap="#shapes" 
height="150" width="150" border="1"
alt="Image Map test" />

<map name="shapes">
<area shape="rect" coords="24,16,128,53"
	 href="http://www.lib.usf.edu" />
<area shape="poly" 
 coords="12,71,51,79,72,107,52,125,19,105"
 href="http://www.usf.edu" />
<area shape="circle" coords="114,100,30"
	 href="http://www.acomp.usf.edu" />
</map>

The image tag contains the usemap attribute. This tells the browser that this image will be getting mapping instruction. The usemap value needs to have a pound (#) sign and no spaces. Try to make the usemap value descriptive.

The <map> tag contains the name attribute. This links the map markup to the proper image. You can have multiple image maps on a page, but the map name needs to match up with the usemap value. Also, there is no pound (#) sign in the map name attribute. Don't forget to close the map markup with the </map> at the end.

In between the <map> tags are the <area> tags. The <area> tags contain the attributes that create the shape of the hyperlink area and the hyperlink.

shape="rect | poly | circle"
Each shape requires a different number of coordinates.

coords="x,y,x,y"
The number of x,y coordinates necessary will depend on what shape you choose. The coordinates are listed in the coords attribute separated by a comma.

href="web page or url"
The href attribute contains the url or file name of a web page you want to link to.

[edit] Image Resources

If you have discovered some great image resources you think we should include in this handout, email the trainers at actrainers@acomp.usf.edu