{{{{ JavaScript - Pictures }}}}

Picture handing is my favourite way of making JavaScript webpages. A few simple commands can be used in a lot of impressive ways! Here are the commands, and a few ways that you can use them.

Mouse click (input)
Change picture (output)
Change picture and back again(output)
Mouse point (input)
Example - galloping horse
Example - photo gallery
Where do you get pictures from?

Start of website

Alphabetical index

Summary of colours in code: green is HTML useful for JavaScript, red is JavaScript, blue is a name and everything else is grey.

Mouse click (input)

Simple input and output uses buttons and text boxes. However, buttons are rather dull. You can make your own far funkier buttons by making a picture to behave like a button. First make (or find) a picture to represent your button. Then use a standard <IMG ...> HTML statement, with ONMOUSEDOWN. This behaves like ONCLICK. Try clicking on the button and see what happens.

It is important also to use ALT. Blind people are able to read webpages using software which reads out the contents to them. However, the software obviously cannot read a picture. It can read ALT. In fact, using ALT is HTML standard.

Change picture (output)

So how do we do output? In fact, it is very easy; see below. Here, I have two pictures, face1.gif and face2.gif. These are very similar, except face1.gif has a slight smile, and face2.gif has its mouth open. (When doing this sort of animation, it is best to keep the pictures similar.) The IMG statement sets up face1.gif as the initial picture. However, the JavaScript code when you click the mouse on the picture sets the picture to face2.gif instead. I have specified a NAME of "face", and this is how the computer knows which picture I am changing. Once you click on the face, it opens its mouth.

The JavaScript statement in the ONMOUSEDOWN is quite complicated. Those are square brackets, and inside, there is a literal giving the picture NAME that you want changed.

There is an easier way to change a picture. You can say

document.face.src = 'face2.gif'

However, the way that I have used above is more flexible and means you can do weird and wonderful things once you start using variables, loops and arrays. I have used the more flexible way throughout my website, rather than having two methods and fluctuating between the two. If you only want to do obvious code, though, you may prefer the simpler way.

Change picture and back again (output)

In the last example, once you had clicked on the face, the mouth opened and stayed open. It would be more satisfying if we could get the mouse to close again. In this example, if you click on the face (ONMOUSEDOWN), it sets the picture to face2.gif which opens the mouth. However, when you have finished the click (ONMOUSEUP), it sets it back to face1.gif with a closed mouth. So you can open and close the mouth as you wish! I have had to change the NAME in this example to "smile" to make it unique on this webpage.

There is a problem with Internet Explorer which you can test with this. As you know, a mouse click is different from a double click. If you double click on the face above, it will open its mouth for the first click, but not the second. There are two other mouse events, ONCLICK and ONDOUBLECLICK. However, these work when the mouse button is released (that is, similar to ONMOUSEUP). The situation is rather complicated, and what's more, works differently in Firefox, so I've given when the different events are actioned in this table.

	Internet Explorer	Firefox
First click (down)	ONMOUSEDOWN	ONMOUSEDOWN
First click (up)	ONMOUSEUP ONCLICK	ONMOUSEUP ONCLICK
Second click (down)		ONMOUSEDOWN
Second click (up)	ONMOUSEUP ONDOUBLECLICK	ONMOUSEUP ONCLICK ONDOUBLECLICK

Mouse point (input)

This example introduces a new way to use the mouse, and also shows another effect that you can achieve by changing pictures.

If you want an effect when you click on a picture, you use ONMOUSEDOWN. But you may want to do something when the mouse just points to tthe picture (that is, the mouse pointer rests on the picture but you don't click). To get this, use ONMOUSEOVER instead, as in this example.

However, this example is more complicated. It has two <IMG ...> statements with different names, "pos1" and "pos2". The JavaScript code if you rest your mouse on the first picture (which is a little man called "man.gif") is two statements. You can do this if you put a semi-colon (;) between the two statements. The first statement changes the first picture to the blank, "blank.gif". The second statement changes changed the second picture to the little man. So by resting your mouse on the little man, he disappears from there and appears in the second picture. The second picture starts as a blank, but may change to a man from the previous statement. So for the second picture's ONMOUSEOVER, you need to set the second picture to a blank and the first back to the little man. The effect is that you can't catch the little man with the mouse, no matter what you do!

You might want to make something happen when the mouse leaves the picture. If so, use ONMOUSEOUT.

Example - galloping horse

This example is similar to the jumping man, except here a picture appears when you rest the mouse on it rather than disappearing. Point the mouse at "Start", then move your mouse (without clicking) across the screen. You will see three pictures of horses appear and diasppear (there are more pictures in the example webpage). Every picture starts as white (hsp.gif). It changes to a different picture of a horse when you rest your mouse on it (ONMOUSEOVER) and back to white again after your mouse leaves the picture.

Start

<HTML>
<HEAD>
</HEAD>
<BODY>
Start

<IMG SRC="hsp.gif" ALT=" " NAME="h1"
ONMOUSEOVER="document.images['h1'].src = 'horse1.gif'"
ONMOUSEOUT="document.images['h1'].src = 'hsp.gif'">

<IMG SRC="hsp.gif" ALT=" " NAME="h2"
ONMOUSEOVER="document.images['h2'].src = 'horse2.gif'"
ONMOUSEOUT="document.images['h2'].src = 'hsp.gif'">

<IMG SRC="hsp.gif" ALT=" " NAME="h3"
ONMOUSEOVER="document.images['h3'].src = 'horse3.gif'"
ONMOUSEOUT="document.images['h3'].src = 'hsp.gif'">

</BODY>
</HTML>

This is a simple attempt at an animation, but it doesn't work very well! For a better version, you need a timer interrupt.

Example - photo gallery

On the web, it is quite common to have pictures as small thumbnails, which produce a bigger image when you click on them. You can set the picture up as a link, but this means either setting up each larger picture as a separate webpage, which is annoying, or just linking to the picture file itself, which doesn't necessarily work for all computers. Here is a way to make the big picture appear on the same webpage. You need a small and big version of each picture, and clicking on the small picture makes the white picture below get changed to the big picture. You don't need NAME on the thumbnail pictures, as you never need to refer to them. You do need NAME on the large picture, though. There are more flowers in the example webpage.

Click on thumbnail for larger picture

<HTML>
<HEAD>
</HEAD>
<BODY>
Click on thumbnail for larger picture<BR><BR>
<IMG SRC="sbergamot.jpg" ALT=" "
  ONMOUSEdown="document.images['large'].src='bergamot.jpg'">
<IMG SRC="sfoxglove.jpg" ALT=" "
  ONMOUSEdown="document.images['large'].src='foxglove.jpg'">
<IMG SRC="spansy.jpg" ALT=" "
  ONMOUSEdown="document.images['large'].src='pansy.jpg'">
<BR><BR>
<IMG SRC="space.jpg" ALT=" " NAME="large">
</BODY>
</HTML>

Several people have said that they like this example. There is another way of doing it here.

Where do you get pictures from?

You can make your own pictures using Paint, or other paint software. If you have a Microsoft Windows operating system, you will find Paint under Accessories. You will probably need to make the picture smaller than the standard size in Paint. Click on Image, then Attributes, at the top of the screen, and select the size you want. When you save the file, it is sensible to save it as a .gif file, as .bmp files take up a lot of room and can be slow to download. I use Paintshop Pro to make pictures.

You can scan in pictures or use digital camera photos. Here, you will probably want to make them smaller, since they are often gigantic files - far too big for webpages. In Paint, click on Image, then Stretch/skew, at top of screen. In the Stretch part, type in how much smaller you want it - 50% would be half the size (and therefore a quarter the area). Make sure that you change both Vertical and Horizontal, or it will end up squashed! Photos should be .jpg files.

You can borrow pictures from elsewhere. If you see a picture on a webpage, then if you right-click on it, you can save it into your own computer. However, the copyright of pictures on the web belong to someone, so you are contravening copyright if you use them without their permission. Some organisations get very annoyed about this, particularly with well-known commercial pictures such as cartoons.

Return to JavaScript index