--
HOME --
3D JavaScript
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
(Move the mouse cursor over the x's.)
There are a few web-page 3D
utilities. Some of them are very expensive. This approach is simple and FREE!
|
The technique is based
on:
Taking a series of
photographs (about 12) as an object is rotated.
JavaScript image 'pre-load' which loads all the images into memory.
JavaScript "Images[0]" array element which refers to the
first image on a page.
Active objects (in this case the letter "x").
The JavaScript "onmouseover" function and the statement: document.images[0].scr=
<image name> |
When the cursor is moved over
the object, the onmouseover function loads another image. All the images
are already in memory, so the action is very fast.
| The full HTML is:
<html>
<head>
<title>3D JavaScript</title>
<script language="javascript">
Image0 = new Image();
Image0.src = "paint0.jpg";
Image1 = new Image();
Image1.src = "paint1.jpg";
Image2 = new Image();
Image2.src = "paint2.jpg";
Image3 = new Image();
Image3.src = "paint3.jpg";
Image4 = new Image();
Image4.src = "paint4.jpg";
Image5 = new Image();
Image5.src = "paint5.jpg";
Image6 = new Image();
Image6.src = "paint6.jpg";
Image7 = new Image();
Image7.src = "paint7.jpg";
Image8 = new Image();
Image8.src = "paint8.jpg";
Image9 = new Image();
Image9.src = "paint9.jpg";
Image10 = new Image();
Image10.src = "paint10.jpg";
Image11= new Image();
Image11.src = "paint11.jpg";
Image12 = new Image();
Image12.src = "paint12.jpg";
Image13 = new Image();
Image13.src = "paint13.jpg";
Image14 = new Image();
Image14.src = "paint14.jpg";
</script>
</head>
<body>
<img border="0" src="paint7.jpg" width="200" height="150"></font>
<A onmouseover = "document.images[0].src= 'paint0.jpg'">x</A>
<A onmouseover = "document.images[0].src= 'paint1.jpg'">x</A>
<A onmouseover = "document.images[0].src= 'paint2.jpg'">x</A>
<A onmouseover = "document.images[0].src= 'paint3.jpg'">x</A>
<A onmouseover = "document.images[0].src= 'paint4.jpg'">x</A>
<A onmouseover = "document.images[0].src= 'paint5.jpg'">x</A>
<A onmouseover = "document.images[0].src= 'paint6.jpg'">x</A>
<A onmouseover = "document.images[0].src= 'paint7.jpg'">x</A>
<A onmouseover = "document.images[0].src= 'paint8.jpg'">x</A>
<A onmouseover = "document.images[0].src= 'paint9.jpg'">x</A>
<A onmouseover = "document.images[0].src= 'paint10.jpg'">x</A>
<A onmouseover = "document.images[0].src= 'paint11.jpg'">x</A>
<A onmouseover = "document.images[0].src= 'paint12.jpg'">x</A>
<A onmouseover = "document.images[0].src= 'paint13.jpg'">x</A>
<A onmouseover = "document.images[0].src= 'paint14.jpg'">x</A>
</body>
</html> |
Rather than using letters as
your objects, you could cut up a graphic of a slider and use each section of the
slider as an object.
Click here
to see the slider in use.
