Adding Images

The Img Tag

The img tag is a unary tag that allows you to add an image to you site. There are a few attributes you need to know while using images. They are src which tells the browser where to find your image, and alt which will display if your image doesn't appear, may display on rollover, and gives a short description of your image to the blind. Another helpful one is longdesc, which can link to a longer description of the image than the 1024 character alt tag. A longdesc is not always neccessary, but an alt tag should always be used to assist those using screen readers.

<img src="imagename.gif" alt="A quick description can be placed here" longdesc="filename.pdf" />

Talking To Only One Image

In order to prevent the content your user is reading from jumping because an image has loaded you will want to set the height and width of your image. This will resevrve the space for the image. To do this you will want to use CSS, but that begs the question of how will you talk specifically to that image? This is where selectors come in, they are a part of CSS that allow you to talk to a certain element by specifying something about it's attributes or it's placement in the flow of your document. To read more about selectors visit the W3Schools page on CSS selectors.

img[src$="imagename.gif"] { height:200px;
width:200px; }

Opacity

One of the more helpful pieces of CSS I have see with images is the opacity tag. This allows you to change the opacity of your image, or other elements without taking them into photoshop and editing them.

img[src$="imagename.gif"] { opacity:0.6; }