Adding Images/Pictures to Your Website
Most websites include at least an image/picture for the site logo. Some websites consist mainly of images.
Here we are going to look at how you add images to your site and some image effects like image rollovers and thumbnails.
Image HTML Tags
The image (<img></img>) tags are used for inserting images in a web page. The opening image tag takes a number of attributes, the most important being the image source.
Most image tags looks like this:
<img src="image1.gif" height="300" width="400" alt= "Main image"></img>
where:
src= specifies the actual image
width and height are the image dimensions usually inserted automatically by the web page editor.
alt= text to be displayed if the browser doesn't support images or has disabled them.
Note:- the width and height should not normally be used for changing the image dimensions. If you need to reduce and image then it is better to resize the image than to reduce it by
specifying a smaller height/width in the image tag.
They are useful for making slight adjustments so that the image lines up correctly. For example if the image was 320 pixels wide and the space it needed to fit into was only
300 pixels then the width attribute could be used to do that without affecting the image quality too much.
Image/Picture Alignment and Positioning
You can align the image to the left or right hand side of the page and have the text appear on the opposite side using the align=left, or align=right attribute. The align attribute
is still recognised by browsers but is a depreciated tag which is recommended you replace with CSS. However for those of you who are unfamiliar with CSS (see
starting css for details) it is probably the easiest
option to use.
Another option and one I prefer when you have multiple images/pictures is to use tables and place the image in one cell and the image text/description in another.
Thumbnails
Thumbnails are smaller versions of an image/picture which give the visitor an idea of the image and the ability to see a larger version of the image by clicking on the thumbnail.
They are especially useful for creating photo/picture galleries.
Thumbnails are created by reducing the size of an image and then making the reduced image into a clickable image. The HTML to do this is:
<a href="large-image.gif""><img
src="small-image.gif" width="80" height="60" ></a>
You can see that it is the standard image tag wrapped in a link tag. The only problem with the thumbnail images is that the larger image is opened in a separate window. To get the
image to open in the same window you can use frames or what I prefer is Iframes.
Here are a collection of thumbnails which when clicked open in the Iframe Below.
  
The HTML for each thumbnail image is as follows:
<a target="thumbnail" href="examples/dog-large.jpg"><img border="2"
src="examples/dog-large_small.jpg" width="100" height="150"></a>
The HTML for the Iframe is as follows:
<iframe name="thumbnail" src="examples/blank.gif"
frameborder=1 height="300" width="400" align="center" scrolling="yes" ></iframe>
Another example uses the onmouseover event to cause the image to load into the Iframe without the need for the visitor to click the link. Just place the mouse over the thumbnail and
see the picture change.
There is only a small change to the above html required and this I've highlighted in purple. The HTML for each thumbnail image is as follows
(need to change image names each time):
<a target="thumbnail" onmouseover="window.open('examples/dog-large.jpg','thumbnail2')" href="examples/dog-large.jpg"><img border="2"
src="examples/dog-large_small.jpg" width="100" height="150"></a>
The HTML for the Iframe is as follows:
<iframe name="thumbnail" src="examples/blank.gif"
frameborder=1 height="300" width="400" align="center" scrolling="yes" ></iframe>
Related Articles and Resources:
Image Sources:
Commercial:
Free:
Useful External resources:
|
