Introduction
Years ago, when this page was first written in November 2003, I was a "Superuser" in both the Lycos Tripod and Yahoo user forums. This page was originally written to demonstrate working code for the users of the forums and the questions I answered.
Things have changed since then; the forums are long gone, HTML and CSS have changed, browsers have come and gone and changed their behaviour, JavaScript I wrote in 2003 no longer works and other things I wrote about are either long obsolete or superseded by far better, more powerful, or easier techniques. Some concerns people had in 2003, are still relevant and the page was completely rewritten in February 2024, to address them.
Image Borders
This section has been kept for historical purposes.
A common question was not how to add borders to images but how to remove the ones that the browser added. It used to be, up until around 2014, that browsers would automatically add a blue border around images that were used as a link. For example:
<a href="mypage.htm"><img src="imptri.gif" width="250" height="200" alt="Impossible Triangle"></a>
would produce the image with a blue border around it, such as:
The advice to remove this border in all browsers was to use the CSS:
a img {
border: 0;
border: none;
outline: none;
}
Why won't my images display?
There could be a couple of reasons for this.
A) Was the image file uploaded?
B) If it was, does the directory structure of the link and the actual directory structure match?
C) The old web page has been cached somewhere and that is being viewed instead of the new page. Try refreshing your browser using Ctrl + F5. This forces the browser to download the page from the internet rather than use any files in its cache.
D) Is the casing of the link and the directory structure the same?
A couple of things you should know about web-servers. Most run UNIX not Microsoft software, this makes them behave slightly differently. When you specify the directory structure Microsoft uses "\" but also understands "/". Unix uses "/" but does not understand "\". For example, you may have a directory called "images" inside a directory called "web". To ensure you can link into the "images" directory you should use the form "web/images" not "web\Images\" as you could do in DOS.
Unix is also case sensitive, what this means is that MyPic.gif is not the same as mypic.gif. You must ensure the name of the file and the link that refers to it are spelled the same, including the letter casing.
Perhaps the most common cause is that the link to the image on the webpage is pointing to the image file still on the users computer. i.e. the link is something like file:///C:/Documents and Settings/My Documents/My Pictures.... The usual reasons are that the author is using an editor and does not keep a copy of the website structure on their machine or they are editing a page that hasn't yet been saved. Because of this, the editor cannot use relative paths to the file and so puts the absolute URL to it.
When the author previews the page on their own machine, the images will show normally, but once the page is uploaded to their site then the link will not work.
Other Original Sections
The original page also contained sections on creating a slideshow, protecting online images from being copied, and background image tiling. Over the years, the techniques have changed and other people have written very comprehensive pages detailing them, so I removed what I originally wrote.