Images

  Pick a Section

Basic Images

To display any image on your page, you first have to upload it to the internet. Uploading means you store a copy of it on a large, always-on computer called a server, or host, so that other people can access it (they cannot access files stored on your computer!). Of course, if you're building a full website, you'll already know all this, and you can upload your images to the same place as your web pages. If however you're just decorating a profile or blog, you're going to need a free host to store your images on. There are plenty of ad supported hosts you can use like [ Tinypic ] and [ Photobucket ]. Uploading to these hosts is quite simple. You click browse, locate the image on your computer, and click Upload. Then they will provide you with a path to where your image is stored, usually called a Link or an Url.

On Tinypic the url will look like this:

and you want to copy the bottom code, called the "Direct Link".


If you prefer to use Photobucket to store your images, you will need to create an account before you can upload anything, and again you'll be shown browse and upload buttons. Once your image is uploaded you'll need to scroll down to see it, and it'll look like this:

Again the one you want to copy is called the "Direct Link".

Nb, If you have your own site the url will be http://www.mysite.com/folder/imagename (don't forget the image extension- gif, jpg, png etc). Once you have your Link or Url, you display the image on your page by pasting that link into an image tag, like this:

Making Image Links

This is the code to make your own clickable image.
You must use the full path of the page you want to link to (ie including the http:// bit), unless it's a part of the same site you're linking from.

If you want your link to open in a new window when someone clicks on it, just include target="_blank" in the link tag (the "a href" part), like this:

Image links usually have a border by default. If you dont want a border on your image, add border="0" to the image tag like this:

Resizing Images

It's better to resize your images in a program like Photoshop or Paintshop before you upload them if you can, as resizing with code reduces image quality.

If you absolutely have to resize an image with code, there are 2 methods available to you. If you are writing the image tag into your page yourself, you can just include your desired width (and / or height) inside it, either with html:

Alternatively, if your image is inaccessible but has a class (often the case on profile / blog sites), or even if you just want to keep things tidy by setting your sizes in a separate style sheet, you can set your image width and height in a separate piece of css, linked to the image by its class. The image tag would have to look something like:

Alternative Text

Alts let you include some alternative text for if the image doesn't load. If your visitors are using Internet Explorer the text pops up on mouseover too. Alt tags are used to give the visitor some information about your image, and its good practice to include them if you can. In XHTML, Alt tags are required on all images, or your page won't validate.

Move your mouse of the image on the left (Explorer users only) to see the alternative text pop up. The image on the right is what would show up if the image failed to load.

Image Borders

With the joys of CSS, not only can you put borders around your static images, but also borders around image links that change style, size or color on mouseover! (check out the [ Mouseover ] bit for more on that) For now lets keep it simple- to put a border around a static image, you can put the border style directly into it's tag:

(class name can be anything), you can give it a border using a separate style sheet, like this:

Mouseover Images

(Aka how to make your images change when someone moves their mouse over them). These methods of creating mouseover images rely on your images being inside a link. Your link doesn't necessarily have to point to anywhere- you'll notice that the instead of a href="path to page", the examples below contain a href="#", which is a link that doesn't go anywhere, but the link tag is essential for these mouseovers to function.


Mouseover Image Swaps

As with so many things in life, there's a couple of ways of doing this. If you're building your own site you may want to use Javascript, whereas if you're working on a blog or profiling site, chances are they won't let you use it, and you'll need to use the CSS method.


The Javascript Method

You will need: 2 images, which have the same width and height (as each other). Let's say the one you want to show up all the time is called mainimage1.gif, and the one you want to appear when someone rolls their mouse over mainimage1 is called mouseover1.gif. We can use Javascripts onmouseover and onmouseout methods to do a straight swap:

And that's it. If you want to swap multiple different images on the same page (for example on a navigation bar) you can give each one a different name (ie image2, image3 image4 etc).


The CSS Method

As with the Javascript version, you need 2 images the same size. Let's call the main image mainimage1.gif, and the one to show on mouseover mouseover1.gif. Then all you need to do is make the link block level so it can have a width and height, and set those dimensions to the size of the images, eg:

Don't forget you must upload your images to the internet, and use full paths (including the http:// bit) if they are not being stored on the same site as the page you're working on. [ More on Image Hosts ]


Filters on Mouseover

You can add a [ filter ] (shows up in IE only) or [ Opacity ] to your images, and have it change on mouseover. Go to those sections for how to apply the different filters. I'm going to use opacity as an example, because it works in most browsers.

The code for this one is simple CSS. You must give your image a class (or if you're working on o profile / blog site it may already have one) and then set the opacity in your style sheet, like this:

Image Size On Mouseover

You can make your images grow like this:

Opacity/Transparency

This code works in (at least) IE, Firefox and newer versions of Opera. It may work in other browsers too. If you want fade in or out effects IE has a specific filter for that: [ Fade Filter ], but it won't work in any browsers other than Internet Explorer. Of course you can always replace the alpha(opacity=xx) part of this code with a fade in/ out filter for Explorer, and set moz-opacity as well for other browsers. Opacity (in case you're wondering) is simply the opposite to transparency. 100% Opaque is completely visible, while 100% transparent is completely invisible. Anyhow, on with the filter.

50% Opaque Image	75% Opaque Image	100% Opaque Image

Here's an example of 50% opacity applied to an image by writing the code directly into the image tag:

Alternatively you can give your image a class (or in the case of profile / blog sites it may already have one) and add your styles in a separate style sheet:

Other Filters (IE only)

You can use filters on images, animated images and even text. (See the [ text bit ] for an explanation of applying filters to text). Filters are exclusive to the Internet Explorer browser, so people using other browsers will just see the original image.

You can apply image filters to any or all of the pictures on your page, either by writing the filter code directly into the image tag, or using CSS to define which image(s) the filter will affect. The codes below use the fliph (horizontal flip filter) as an example of different ways to apply the filter. You can change fliph for any of the filters further down the page to use a different filter.


To apply the filter to every single image on your page:

filter: alpha(opacity=0, finishopacity=100, style=1);

filter: alpha(opacity=100, finishopacity=0, style=1);

filter: alpha(opacity=100, finishopacity=0, style=2);

filter: xray;

filter: blur;

filter: fliph;

filter: flipv;

filter: gray;

filter: invert;

filter: wave;

Hosts / Upload Help

Uploading an image means that you put it on the internet so anyone can access it at any time, even if your computer is turned off. There are lots of ad supported sites that will let you host your images for free.



Tinypic [ www.tinypic.com ]

Tinypic is possibly the simplest image host ever. You simply click "Browse" find the file on your computer you want to upload, and press "Upload":

When you're done, it spits out 4 links like this:

You want the bottom one. The "Direct Link For Layouts". Then all you do to put the image on your page copy the link and paste it into an image tag, like this:

<img src="http://i9.tinypic.com/6u98iea.jpg">

Although tinypic is good for hosting the odd image, it has its drawbacks- if you loose an url you cant get it back and you have to start over, and you cant delete your images.

Photobucket is a little more complicated, requiring you to sign up and log in before you can start to upload your pictures. (Press the red "Join Now" button on the top right of the page to create an account). On the plus side, it does have the benefit of allowing you to edit delete and organize your images, and upload several at once.
When you've signed up and logged in you get an interface similar to tinypic- browse and upload buttons. Once the image has uploaded you're returned to the same page, except with an orange box telling you your images were uploaded successfully. Then you have to scroll down to get the url. Each one has 4 links (again like Tinypic), and again you want the "Direct Link", this time it's the second one down.

<img src="http://i72.photobucket.com/albums/i170/ElectroGenius/monkey.gif">

Imageshack is a bit over complicated looking, but again theres only 2 buttons you need to pay attention to- "Browse" and "Host It". At first glance it looks like an email address is required, but as with Tinypic you don't actually need to create an account to upload, so if you don't want to just leave the email field blank.

When you've uploaded your picture you're faced with a whole bunch of urls most of which are in BBCode, and this time none of them are a direct link. What you do have however is a thumbnail code, which is ideal if your image is large and you want people to see a small version then click for full. If you're happy with that all you need to do is take the top code, the "Thumbnail For Websites" and paste it into your page exactly as it is:

If this isn't what you're after and you want to display the full image, what you need to do instead of selecting a link from that page, is click ON the image:

Which will take you to a new page with the big version of your image on. Then scroll down, and you'll see another box of links like this:

And there right at the bottom is your direct link. As with the hosts above you can just take this direct link and paste it into your image tag, like so:

<img src="http://img413.imageshack.us/img413/3908/monkeyuo7.gif">

Then paste the image tag into your page.