Using Images

Overview

Using Images Safely

GIF & JPEG files

Thumbnail Images

Animated GIF files

Macromedia Flash

Image Libraries

Scanners & Digital Cameras

INSET Course

Software:

:: Irfanview

:: ThumbHTML

Dynamic Images

Javascript Rollovers

A what rollover? Let's explain those two words...

Javascript is a computer language which most web browsers can understand. It allows an author to define an object in the page (such as an image) and assign certain behaviours to it. These behaviours are dependent on what happens to the image, or elsewhere on the page.

Rollover is a term which describes what happens when a mouse moves over an image on the screen. These are sometimes described as hover buttons or mouseover buttons. We will see an example in a moment, although you have probably already used them elsewhere on the internet.

Example

Here's an image:

Moving your mouse over the image achieves nothing. That's because the image has no behaviours associated with it. Now, here's a second image:

Again, nothing happens. However, what we can do is add some Javascript to the web page so that when a user moves their mouse over the red image, the web browser will make something happen, in this case display the blue image. What we will do is say something like:

1. display red image
2. when mouse moves over red image, display blue image in its place
3. when mouse moves back off blue image, restore the red image

Here goes... try it now:

But hang on...

How do I learn Javascript? What bit goes where in my web page? I don't want to be a programmer!

There are a host of utilities available on the internet to enable you to create rollover effects. It's probably a good idea to have a little understanding of HTML before you use them.

Each tool requires that you have some images which you would like to use. If it's interactive buttons you would like to create, you will need an image for each 'state' of the button - the first the 'state' the button is in when it displays as normal, the second the 'state' it is in when a mouse is placed over it. Here are two examples below (created using GIFWorks).

Once you have two images like this, you can practice with them in some of the following tool. Alternatively, copy these two images to your computer and practice using them.

• The MouseOver Machine from Builder.com's Cool Tools

Programs such as Dreamweaver, Fireworks, Paint Shop Pro, FrontPage and PhotoShop can all create interactive images - they generate the javascript (and sometimes the web pages) for you, so you don't have to worry about any technical stuff at all!