Images and the web

When copying the code from these pages remember to paste them first into a text only editor such as Notepad and then copy and paste from there into your webpage. This is so that all the text formatting codes can be removed from the copied text. Remember that your HTML editor must be in code or HTML view when you paste the code into it. If you are using a template driven HTML editor then the code must be pasted into an HTML and not a text box. JavaScript must be enabled in your browser for the effects generated by it to be seen.

Images - Page 2

Images

Why won't my images display?

Optimizing images

What file types are supported?

Image borders

How do I create a slideshow? (JavaScript)

How do I stop people copying my images? (JavaScript)

Creating and using thumbnails

Images as page backgrounds

Background images without tiling

Image borders

A border can be placed around an image by using the border attribute.

Border using <img border="5" src="imptrit.gif" align="center" width="122" height="100">

However to change the style or colour of the border then styles or CSS (Cascading Style Sheets) must be used.

This is produced by using <img Src="imptrit.gif" width="122" height="100" style="border: blue solid 5;" align="center">

In fact the border attributes can be solid, dashed, dotted, double, groove, ridge, inset and outset.

To add a border to all your images put this in the head section of your page.

In the body section, where you want your images with borders put

You can change the class name mystyle to whatever suits you, but it has to be the same in the code sections in the head and the body. More information can be found at W3C CSS 1 and W3C CSS 3

How do I create a slideshow? - (JavaScript)

This isn't too hard to do, and can look impressive. First of all you need to place the following piece of code in the <BODY section of your webpage onLoad="runSlideShow()" This makes the <BODY statement of this page

Now add the following JavaScript to your page

<SCRIPT LANGUAGE="JavaScript"></SCRIPT>

Obviously, replace the names of the images with the ones you want to display

Now you can display your images, you do this by adding the following code where you want them to appear

Chicago from the Sear's Tower, 13th November 2001

The images should be the same size as the browser will stretch the images to fit the space provided by the first one.

How do I stop people copying my images?

You can disable the right mouse button menu using the following JavaScript

The script produces the following message when the user right clicks on this page

This method isn't totally foolproof though, as all anyone has to do is disable JavaScript in their browser and the code won't work. They can also change the mouse properties so that the right mouse button becomes the left or simply drag and drop the image straight into a image editing window. Personally, I don't like this particular piece of code, it probably says more about the mentality of the person using it than providing much security.

A better way to discourage people pinching your images may be to add a logo or your URL to the images. If done properly then it doesn't distract from the image. Unfortunately some people do this sort of thing and manage to mess it up. Not only is the image not worth pinching, it isn't even worth putting on the site in the first place.

Creating and using thumbnails

A thumbnail is a smaller version of an image. They are usually used a clickable link to take the visitor to a larger version of the image. There are a couple of ways of producing them. One way is to resize the image in HTML, this can cause problems but is included here for the sake of completeness. The code to produce the image above is

By changing the height, width or both the image can be resized

The image above has been simply resized in HTML, the code for it is now

If your HTML editor specifically offer the possibility of keeping the aspect ratio of the image, then just specify one of them. The same size image will be displayed if the code were

The disadvantages of resizing images in HTML is that the image sometimes becomes blurred during the resizing process. Besides which the entire larger image has to be downloaded by the browser prior to resizing. The original image has a file length of 37kb - so has the thumbnail.

A better way of producing thumbnails is to create them in an image editing program from the original image. In this case the thumbnail would be around 5kb instead of 37kb. When I create thumbnails I usually suffix them with "t" just to show they are thumbnails of a larger image. For example the thumbnail of marked.jpg would be markedt.jpg.

Having made your thumbnail you can now link to it and show the image in several ways. To show the larger image in the browser window then you can use

Click on the thumbnail to show the larger image

(Use the back button to return to this page)

To open the larger image in its own window use Target="_Blank" in the link

Click on the thumbnail to show the larger image in a new window

If the image is on a HTML page then you can change the link to that page, the same as any other link.

Click on the thumbnail to go to the page the larger image is on

(in this example this page is simply reloaded, but the idea is the same for any HTML page)

If the larger image is on a page with several other images, or halfway down a page of text you can use a bookmark to that page. Next to, or just above the image put an anchor bookmark. The code for this is <a name="mymark"> where mymark can be changed to any text you find convenient.

Click on the thumbnail to go to the larger image

As in the last example this page is simply reloaded and the browser scrolls down to the mymark anchor tag. If the image is on the same page as the thumbnail - for example when you have the thumbnails at the top of the page and the main images elsewhere on the page then you can simply change the link text to

Something worth remembering is that when you produce the thumbnails you don't have to use the entire image. You may want to use the main part of the image as a thumbnail. In the example below, I've just used the house as a thumbnail.

Part of an image ready to be used as a thumbnail

You can even show the larger image show in place of the thumbnail. Run your mouse over the thumbnail below...

This is done by adding the following code where you want the image to appear...

<p align="center">

<script>
Image1A=new Image();
Image1A.src="markedt.jpg";
Image1B=new Image();
Image1B.src="marked.jpg";
</script>
<a onmouseover="Image1.src='marked.jpg';" onmouseout="Image1.src='markedt.jpg';">
<img name="Image1" src="markedt.jpg" border="0"></a></p>

If you prefer, the changeover can be done after some action by the user, such as clicking on the image. Click on the thumbnail below...

The code to do this is...

<p align="center">

<script>
Image2C=new Image();
Image2C.src="markedt.jpg";
Image2D=new Image();
Image2D.src="marked.jpg";
</script>
<a onclick="Image2.src='marked.jpg';" onmouseout="Image2.src='markedt.jpg';">
<img name="Image2" src="markedt.jpg" border="0"></a></p>

Images as page backgrounds

You can specify an image to use as a background in the BODY tag of your page. The body tag will look like this...

<body background="image_name.ext">

The method above is now depreciated in HTML standards. Instead, you can specify the image using CSS...

<style type="text/css">
body
{
background-image: url('image_name.ext')
}
</style>

A popular style for web pages is to have a left hand border image. Without using CSS this can be a little awkward. If it is defined in HTML, a background image will tile both horizontally and vertically until the page is filled. The image used as the background to this page for example is 128 x 128 pixels.

However, an image that is bigger than the window it is being viewed in will not, unlike other images on a page, cause scroll bars to appear. This is demonstrated here. Try changing the window size of the demonstration page and see what happens. This can be used to advantage to produce a left hand border image. Suppose you want a nice border on the left and a plain colour, or a different image on the right. Most people appear use a screen size of 1024 x 768, the next popular size seems to be 800 x 600. However, people use screen sizes a lot larger than this. To create an image that doesn't tile horizontally for people viewing at these larger screen resolutions the image must be at least 1,600 pixels wide. The height of the image must be the size of the repeating pattern. If things like straight vertical lines or just different colours are used then the image need only be around 10 pixels high - it will repeat vertically.

Some sites that demonstrate some nice border patterns are at The Poem Tree and EOS Development.

Any part of the image can be transparent. This means that the main background colour can be set in the BODY tag using BGCOLOR or in CSS using background-color: as normal. The image below was created for the demonstration page...

The image used on the demonstration page is 2,000 pixels wide and 100 pixels high. The white background was made transparent.

Using CSS, there is a huge variety of things you can do with images, even background ones. For example, instead of creating the very wide images to create a left hand border, using CSS a smaller image can be tiled vertically only.

The above simple image - imptrit.gif - can easily be turned into a border image by using the CSS code...

<style type="text/css">
body
{
background-image:
url('imptrit.gif');
background-repeat: repeat-y
}
</style>

The above code is demonstrated here.

There is lots more interesting information about using CSS to control background images at the following sites.

HTML Goodies

HTMLITE

W3Schools

WDG HTMLHelp

Background images without tiling or how to stretch a background image to fill a browser window

To be able to do this the following code is used...

<body style="margin: 0px; padding: 0px;">
<div style="width: 100%; height: 100%; left: 0px; top: 0px; position: absolute; z-index: 0;">
<img src="image_name.ext" style="width: 100%; height: 100%;">
</div>
<div style="z-index: 1; position: absolute;">
The actual page code .....
</div>
</body>

The image will not tile and is automatically dimensioned to fill the browser window. Take care to choose an image where it doesn't matter too much if a lot of distortion occurs. The code is demonstrated here.

The above code only works properly if the HTML page length is less than the picture height. If the main text of the page is longer than the background image you get a white space under the image. Here's what happens and how it can be reproduced in Firefox, IE, Mozilla, Netscape and Opera. If the text is longer than the image and the browser window is smaller than the image then when you scroll down you get a white space under the image. The code does exactly what it was supposed to, fills the browser window with the image. Because the text is longer than the window then the scroll bars appear on the right. Scrolling down the page means the background suddenly ends. This is because it was sized to the original window, not the actual page length. It's also fixed to the top left of the page.

Solution 1 - Using JavaScript - This is demonstrated here

The problem with this solution is that it's jerky. Even taking the timing interval down to 10 thousandths of a second it's still jerky. The specific IE problem is that the browser allows you to scroll past the end of the second DIV. In fact, as far as I can tell the apparent page length is infinite.

Solution 2 - CSS - This is demonstrated here

This is far easier to cope with. It uses the CSS FIXED method. The specific problem with IE in this case is that it doesn't recognize the FIXED property. So it simply doesn't work properly.

Solution 3 - Improved CSS - This is demonstrated here

The last and best of the codes, this seems to work properly and without a load of jerking around. It uses two CSS files, one for all browsers except IE and another specifically for IE.

To use the method above, put this in the HEAD section of your page...

<style type="text/css">
@import "bgall.css";
</style>

</style>

The BODY section of the page looks like this...

<body>
<div ID="fixedbg">
<img src="image_name.ext" style="width: 100%; height: 100%;">
</div>
<div ID="content">
The actual page code .....
</div>
</body>

CSS files are normal, plain text files. bgall.css looks like this...

@media screen
{
body
{
margin: 0px;
padding: 0px;
}
div#fixedbg
{
overflow: auto;
height: 100%;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
z-index: 0;
}
div#content
{
z-index: 1;
position: absolute;
left: 0px;
top: 0px;"
}
}

and bgie.css looks like this...

body
{
height: 100%;
overflow: hidden;
font-size: 100%;
}
div#content
{
width: 100%;
height: 100%;
overflow: auto;
}
div#fixedbg
{
position: absolute;
}

None of the methods work in WebTV - it just doesn't seem to like layers in web pages.

Images

Why won't my images display?

Optimizing images

What file types are supported?

Image borders

How do I create a slideshow? (JavaScript)

How do I stop people copying my images? (JavaScript)

Creating and using thumbnails

Images as page backgrounds

Background images without tiling

This page created 28th November 2003, last modified 12th February 2005

GoStats stats counter