Images

• Code for inserting an image: <img src="imagename.jpg">
  - Use the path references defined in the Links section for linking to images in other directories.
  
  
• Image properties:
  
  

  Properties	Code	Description
  align	<img src="imagename.jpg" align="right">	aligns the image to the right or left of the paragraph where it's inserted. Other align options are top, texttop, middle, absmiddle, baseline and absbottom. Not all these values are supported in all browsers. Be sure to check various browsers to see how it's displayed.
  alt	<img src="imagename.jpg" alt="name or short description">	This short description will appear in a small pop-up box when the mouse hovers over the image. You may use spaces in this description. Some browsers don't wrap text and don't display long descriptions, so keep it brief. You can describe the picture or the action, if it links to a page, for instance. This is very good for user who have images turned off, or for describing what the image is before it compelets loading. Even if an image is broken, the alt tag will appear. This is essential for text readers to user with visual disabilities.
  border	<img src="imagename.jpg" border="0">	The border tag will appear IF the image is also a link. There will be a default border of "1" in the link color around the image. If you do not want the border displayed, set the border to "0". If the image is not a link, the border will appear in the color as the text.
  width/height	<img src="imagename.jpg" width="230" height="138">	Benefits of defining size: browser will allow the exact space needed on the page for the image while it loads, so you can see how the page will look, even before the image loads - helps in loading quicker to already have a size defined, so the browser doesn't have to wait on the server to tell it what size the image will be. Note: If you try to resize the image just by defining a smaller size, but not actually using a smaller version of the image, it will still take just as long to load as the larger image. So if using "thumbnails," create a smaller image to use and link to the larger one. To find out the dimensions of an image, (Netscape) right-click on the image, select "View Image." Right-click again and select "View Info." In IE, right-click and select "Properties".

  
  
• Making an image a link
  - Create a link, like you would with a text link, but instead of text, insert the image tag:
  <a href="support.html"><img src="building.jpg" alt="ABC Building, click to go to Support" border="0"></a>
  
  The result is having an image that is "clickable" and when clicked will go to the specified page. The cursor will automatically display a hand when hovered over an image link.
  
  
• Referencing - Making an image appear on your page that resides on another page, without having a copy in your directory.
  
  - If you find an image on another site that you want to use, but don't want to copy to your directory, use the full path when defining the image's source path. This is useful when linking to other companies and using their logos or when advertising for someone else's products. It also saves space on your server.
  
  <img src="http://www.musc.edu/images/head.gif">
  
  - Beware: when linking to other sites, you have an increased risk of the image becoming broken, and other sites change, delete and move often. So you have to check on these links often to make sure they remain valid. Also, you're depending on the load time of that server for your page. So if that site's server is down or running slow, your linked image will be affected. It will also take even longer if you manipulate the size of that image from your page.
  
  
• Copying an image to your directory - beware of copyrights
  - The same way you check for the properties (right-click and view), you can save an image locally. You'll notice a "Save as" option when you right-click on an image.
  
  - Some pages don't allow right-click saving of images - just take a hint that these shouldn't be messed with.
  
  - If you're wanting an image that changes (like a rollover) and can't click on the right one, try viewing the source code to find the image name, then type it in. Sometimes this is tricky, because the path you need isn't displayed.
  
  - Be very careful when picking up images. Most sites will post permissions or warnings about lifting their material. When in doubt, it's best to assume that the information is copyrighted and leave it alone. There are numerous sites that offer free images, gifs, buttons, etc. for your pages.